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

编程问答 2022-04-21

问题描述

我正在尝试使用 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，我知道它可以工作，因为我可以让它为我的 favicon 工作，它是在 base.html 模板的 HEAD 部分中编码的。此外，我已经使用以下代码在 base.html 模板中测试了我的背景图片：

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

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

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 文件夹中查找，而不是在图像文件夹或 css 的某个名为图像的子文件夹（不存在）中查找，因为我已经明确指出该文件是在名为图像的文件夹中，但我怀疑代码在 BODY 标记内的 base.html 模板中工作但不在样式表中的原因可能是因为样式表已经在静态文件夹中（此外，在static 文件夹），而 base.html 模板在 static 文件夹之外。

我试图添加代码以在父文件夹中查找：

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

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

我错过了什么？

解决方法

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

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

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

flaskpythonstaticstaticstaticstylesheetstylesheeturl-for