我试图设置一个背景图像使用Python3与 flask 。
我的Python文件看起来像这样:
app = Flask(__name__, static_url_path='/static/', static_folder='/static/')
@app.route("/", methods=["GET"])
def index():
return render_template('index.html')
HTML块包括:
<head>
<link rel="stylesheet" href="/static/main.css">
<!-- Bootstrap 4 beta -->
<link rel="stylesheet"...
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-12 bg-logo">
col 1
</div>
</div>
</div>
</body>
和我的CSS文件:
.bg-logo{
background: url({{ url_for ('static', filename = '/static/img.png') }});
background-size: 100% 100%;
height: 300px;
background-size: cover;
}
由于某些原因,浏览器不能正确地获取CSS文件。我需要一种方法来从静态文件夹中提供静态文件,而不使用@app.route
3条答案
按热度按时间3pmvbmvn1#
我也有同样的问题。看了几个答案后,这会对你有帮助。
确保您的文件组织如下:
在www.example.com(或任何文件名)中,只需按照@afc11hn所述执行:app.py (or whatever your flask filename), just do as @afc11hn say:
然后在main. css中:
当运行flask应用程序时,您将能够在终端中看到由flask应用程序为呈现的特定html模板发出的get请求。
例如,
127.0.0.1 - - [02/Feb/2023 11:35:43] "GET /static/css/styles.css HTTP/1.1" 200 -
以及
127.0.0.1 - - [02/Feb/2023 11:35:43] "GET /static/css/background_picture.jpeg HTTP/1.1" 200 -
如果你得到一个HTTP 400响应,这意味着它确实尝试在指定的位置查找图片,但找不到图片。这可以引导你将图片移动到正确的位置。
您还可以在flask应用上更改static_folder属性,以更改其查找文件的基础。
vi4fp9gy2#
过去我克服这个问题的唯一方法是将图像硬编码到HTML页面/模板中。
然后可以在样式表中进一步按ID或类设置图像样式。
mutmk8jj3#
tl; dr:同时删除
static_url_path
和static_folder
在第一行中,您有:
app = Flask(__name__, static_url_path='/static/', static_folder='/static/')
如果我删除了
static_url_path='/static/'
中的尾随斜杠,并删除了static_folder='/static/'
中的前导斜杠或两个斜杠,那么它对我有效。但由于这些都是默认值,我将简单地删除它们。
这对我很有效:
/示例网站main.py
/templates/index.html
/static/main.css