gpt4 book ai didi

python - 图像不显示 Flask HTML CSS 背景图像

转载 作者:太空宇宙 更新时间:2023-11-04 07:57:16 25 4
gpt4 key购买 nike

我正在尝试使用 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 block 包括:

<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 的情况下从静态文件夹提供静态文件

最佳答案

我和你有同样的问题。查看几个答案后,这会对您有所帮助。

确保你的文件是这样组织的:

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

在 app.py(或任何你的 flask 文件名)中,按照@afc11hn 所说的那样做:

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

关于python - 图像不显示 Flask HTML CSS 背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47242570/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com