图像未显示在Flask HTML CSS背景图像中

ycl3bljg  于 2023-02-06  发布在  其他
关注(0)|答案(3)|浏览(207)

我试图设置一个背景图像使用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

3pmvbmvn

3pmvbmvn1#

我也有同样的问题。看了几个答案后,这会对你有帮助。
确保您的文件组织如下:

/app.py
/static/main.css
/static/img.png

在www.example.com(或任何文件名)中,只需按照@afc11hn所述执行:app.py (or whatever your flask filename), just do as @afc11hn say:

app = Flask('__name__')

...

然后在main. css中:

.bg-logo {
  ..
  background: url(img.png);
  ..
}
    • 编辑(来自其他用户的其他提示)**

当运行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属性,以更改其查找文件的基础。

vi4fp9gy

vi4fp9gy2#

过去我克服这个问题的唯一方法是将图像硬编码到HTML页面/模板中。

<div id="image" style="background:url(/static/images/image_of_something.jpg) center / cover no-repeat;"></div>

然后可以在样式表中进一步按ID或类设置图像样式。

mutmk8jj

mutmk8jj3#

tl; dr:同时删除static_url_pathstatic_folder
在第一行中,您有:
app = Flask(__name__, static_url_path='/static/', static_folder='/static/')
如果我删除了static_url_path='/static/'中的尾随斜杠,并删除了static_folder='/static/'中的前导斜杠或两个斜杠,那么它对我有效。
但由于这些都是默认值,我将简单地删除它们。
这对我很有效:
/示例网站main.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/", methods=["GET"])
def index():
    return render_template('index.html')

if __name__ == '__main__':
    port = int(5000)
    app.run(host='0.0.0.0', port=port, debug=True)

/templates/index.html

<html>
<head>
  <link rel="stylesheet" href="/static/main.css">
</head>
<body>
<div class="container">
<div class="row">
    <div class="col-md-4 col-12 bg-logo">
        col 1
    </div>
</div>
</div>
</body>
</html>

/static/main.css

.bg-logo{
  background: url({{ url_for ('static', filename = '/static/img.png') }});
  background-size: 100% 100%;
  height: 300px;
  background-size: cover;
}

相关问题