在Python Flask之前一切都运行良好。现在我尝试将我的HTML页面与Python Flask连接起来。CSS工作正常,但是当我在CSS文件中定义图像时,图像不再加载到网站中。相反,它显示错误 404。
蟒蛇 app.py 代码
from flask import Flask, render_template, url_for
app = Flask(__name__ , static_url_path='/static')
@app.route('/')
def index():
return render_template('/intro.html')
if __name__ == '__main__':
app.run(debug=True)
网页代码 :-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>NewliFit</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="{{ url_for('static',filename='css/owl.carousel.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename = 'css/owl.theme.default.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/firstone.css') }}">
</head>
<body>
<div class="main">
<div class="cover-image">
<div class="menu">
<div class="leftmenu">
CSS 文件
@charset "utf-8";
/* CSS Document */
*{
margin: 0px ;
padding: 0px ;
}
/* ------------cover image -------------*/
.cover-image {
background-image: url({{ url_for('static',filename = '/images/cover4.jpg')}});
background-size: 100% 100%;
width: 100%;
height: 110vh;
}
请帮忙。
您在CSS文件中使用url_for,这不起作用。您需要在 HTML 文件中指定背景图像的 URL,或者在 CSS 中指定正确的 URL。
因此,请将其添加到您的CSS中:
background-image: url('/static/images/cover4.jpg')}});
或者将 HTML 文件中的封面图像div 更改为:
<div class="cover-image" style="background-image: url({{ url_for('static',filename = '/images/cover4.jpg')}});">
除非您打算定期更改静态文件夹(或封面图像(,否则我建议您走第一条路线,以确保您将样式和语义分开。