python - Flask 无法加载 CSS 中的图像

Question

我从元素的前端(HTML、CSS)开始。然后我制作了一个包含以下代码的 Flask 文件:

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)

index.HTML 链接到 CSS，如下所示:

<link rel="stylesheet" type="text/css" href="/static/style.css">

我这样创建了 div:

<div class="header-container">
    <div id="hero-overlay"></div>
</div>

在 CSS 中，我像这样调用图像:

.header-container {
    background-image: url('IMAGENAMEHERE.jpg');
    width: 100%;
    height: calc(100vh / 9 * 7);
    top: 10px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    z-index: -1000;

由于 CSS 位于 project/static 而图像位于 project/static/images 我也试过:

background-image: url('images/IMAGENAMEHERE.jpg');

我的文件夹布局是这样的(MAC):

/project
project.py
/project/static
style.css
/project/static/images
contains the image
/project/templates
index.html

我是 Flask 的新手。这是我第一次尝试构建网络应用程序。

谢谢!

编辑================

还试过:

map 结构:

| myprojectfolder
   - project.py
   - templates/
   - static/
         - style.css
         - images/
              - imagename.jpg

Py:

from flask import Flask, render_template

app = Flask(__name__, static_url_path='/static')


@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)

CSS:

.header-container {
    background-image: url("/static/images/imagename.jpg");

================编辑 2:修复================

在 Joost 的建议下，我将所有图像移动到静态文件夹中。突然加载标题。然而，菜单图像没有，即使它们仍然指向同一个文件夹:/static/images/。

你会认为所有这些都不起作用，因为图像现在是静态的。然后我将图像移回图像文件夹，然后所有图像开始工作。几乎像是某种缓存问题。

Py 现在是:

from flask import Flask, render_template

app = Flask(__name__, static_url_path='/static')


@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)

我想我是在告诉 Flask 静态文件夹相对于元素文件夹的位置。

CSS中的每张图片都是这样调用的，效果很好:

background-image: url(/static/images/mobile-Music.png);

Answer 1

尝试:

background-image: url("/static/images/IMAGENAMEHERE.jpg");

你的图片必须在这里:

/project/static/images/IMAGENAMEHERE.jpg

编辑:

尝试这个迷你示例，并将名为 test.jpg 的图像放入您的 static/images 文件夹中。我刚刚试了一下，效果很好。

from flask import Flask, render_template_string
app = Flask(__name__)
@app.route('/testing')
def testing():
    return render_template_string('<img href="/static/images/test.jpg"/>')