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 / images中，并且图像位于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

我对烧瓶很陌生。这是我第一次构建Web应用程序。

谢谢！

EDIT ================

也尝试过：

地图结构：

| 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：FIX ===============

根据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"/>')

CSS中的图像不会随Flask一起加载

1 个答案: