如何在 CSS 文件中使用 Flask url_for？

Question

我将 Flask 与 HTML 和 CSS 结合使用。如果可能：

 <img src="{{ url_for('static', filename='images/planets.jpeg' ) }}">

我必须在这里写什么来解决相同的图像？

 .bgimg-1 { background-image: url('https://i.ytimg.com/vi/J9QOB6hSI-c/maxresdefault.jpg'); }

解决方案应与此类似：

 .bgimg-1 { background-image: url('{{ url_for('static', filename='images/planets.jpeg' ) }}'); }

谢谢你。

原文由 The Fool 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能直接在 CSS 文件中使用 Jinja，因为您通常不会将其呈现为模板，但有 3 种替代方法可以满足您的需要：

方法一

在 CSS 文件中使用正确的相对路径：

 background: url("/static/images/bg.jpg") no-repeat 0px 0px;

方法二

将您的 background 行放入模板中：

 <style>
    background: url("{{ url_for('static',filename='images/bg.jpg') }}") no-repeat 0px 0px;
</style>

方法三

在模板中定义一个 CSS 变量：

 <style>
    :root {
        --background-url: {{ url_for('static', filename='images/bg.jpg') }}
    }
</style>

然后在你的 CSS 文件中使用它：

 background: url("var(--background-url)") no-repeat 0px 0px;

原文由 Grey Li 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您通过 /static/css/style.css 静态地提供 css。当您这样做时，Flask 不会使用 Jinja 来解析 CSS 文件，就好像它是一个模板一样。

但是，如果你有一个路由（例如 @app.route('/css/<file>') ），那么你可以使用 render_template() 方法来渲染你的 CSS 文件，就好像它是一个 jinja 模板，然后解析 jinja 指令（例如 {{url_for()}} ）

原文由 poundifdef 发布，翻译遵循 CC BY-SA 4.0 许可协议