时间戳

首页 > 解决方案 > Flask (Python) - 并行文件夹中图像的样式表 url_for 代码

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

问题描述

我正在尝试使用 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;
  }

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

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

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

我试图修改代码以查看父文件夹：

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

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

我错过了什么？

标签： pythonflaskstaticstylesheeturl-for

解决方案

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

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

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

推荐阅读