Flask (Python) - 并行文件夹中图像的样式表 url_for 代码

Question

我正在尝试使用 Flask 构建网站。我正在使用 Python 3.9 我有以下目录树：

environment/
    main.py
    app.yaml
    requirements.txt

    Templates/
        base.html      #base template
        index.html     #extends base.html

    Static/
        css/
            main.css
        images/
            favicon.ico
            bckgrnd.jpg
        fonts/
            Carolingian.ttf
            Latin.ttf

这是main.py中的代码：

from flask import Flask, url_for, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template('index.html')

if __name__ == "__main__":
    app.run(debug=True)

我一直在尝试为我的网站设置背景图片。在“main.py”中，我导入了 url_for，我知道它有效，因为我可以让它为我的图标工作，它在 base.html 模板的 HEAD 部分编码.此外，我已经在 base.html 模板中使用以下代码测试了我的背景图片：

<BODY style="background-image: url({{ url_for('static', filename='/images/bckgrnd.jpg') }})">

此代码成功运行。但是，我更愿意将此样式移动到我的样式表中。当我实现我的自定义字体时，我也希望运行遇到同样的问题，这对于 webapp 的正确运行至关重要。我试图在样式表中实现相同的代码：

body {
  background-color: rgb(180,160,120);
  background-image: url({{ url_for('static', filename='/images/bckgrnd.jpg') }});
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  }

但是，背景没有出现（我的样式表的其余部分工作正常，包括背景颜色，所以没有问题）。我的终端告诉我它不是在图像文件夹中寻找 bckgrnd.jpg，而是在 css 文件夹中：

127.0.0.1 - - [07/Jul/2021 10:19:56] "GET /static/css/bckgrnd.jpg HTTP/1.1" 404 -

我不明白为什么它会在 css 文件夹中查找图像，而不是在 images 文件夹或 css 的某个名为图像的子文件夹（不存在）中查找，因为我已经明确指出该文件位于名为 images 的文件夹中，但我怀疑代码在 BODY 标记内的 base.html 模板中有效但在样式表中不起作用的原因可能是因为样式表已经在静态文件夹中（此外，在静态文件夹的子文件夹中），而 base.html 模板在静态文件夹之外。

我试图修改代码以在父文件夹中查找：

body {
  background-image: url({{ url_for('static', filename='/../images/bckgrnd.jpg') }};
  }

但是这段代码对网页的外观或终端中的信息没有影响。它仍在 css 文件夹而不是图像文件夹中寻找文件。

我错过了什么？

Answer 1

当您在 CSS 文件中时，您已经在 static 中。那为什么不直接写路径：

body {
  background-image: url('/static/images/bckgrnd.jpg');
}

您也应该尝试 url({{ url_for('static', filename='images/bckgrnd.jpg') }});。请注意图像前面缺少的正斜杠。如果这不起作用，则意味着 Jinja 仅用于在烧瓶的 render_template.

中用作输入的文件

Flask (Python) - 并行文件夹中图像的样式表 url_for 代码

Flask (Python) - Stylesheet url_for code for image in a parallel folder

python

flask

static

stylesheet

url-for