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

【问题标题】：How to use Flask url_for in a CSS file?如何在 CSS 文件中使用 Flask url_for？
【发布时间】：2018-12-05 07:36:32
【问题描述】：

我正在使用带有 HTML 和 CSS 的 Flask。如果可能：

<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' ) }}'); }

谢谢。

【问题讨论】：

【解决方案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;

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以在 url_for 函数中简单地引用生成的 URL。

举个例子：

.bgimg-1 {
   background-image: url('/static/images/planets.jpeg');
   min-height: 100%;
}

另外，请注意 CSS 本身可以通过以下方式引用：

<link rel="stylesheet" href="{{ url_for('static', filename='css/planets.css') }}">

更新：

或者，您可以将 Jinja2 嵌入到 style 属性中。例如：

<body style="background-image: url({{ url_for('static', filename='images/planets.jpeg') }});">
<!-- HTML TEMPLATE CODE -->
</body>

【讨论】：

【解决方案4】：

我没有足够的声望点来评论 Grey Li 答案。方法 3 很好 - 修改以使其工作

HTML 模板

<style>
:root {
    --background-url: url('{{ url_for('static', filename='img/lightning.jpg', _external=True) }}');
}
</style>

CSS

background: var(--default-bg-color) var(--background-url);

【讨论】：

【解决方案5】：

我的要求是在 CSS 文件中添加字体文件。我使用的静态文件夹结构是这样的：

static 
├── css
|   ├── main.css
├── fonts
|   ├── NotoSans-Regular.ttf
├── js
|   ├── index.js

如果我在 main.css 文件中使用了 Flask 的 url_for() 函数如下

@font-face {
  font-family: 'NotoSans';
  src: url("{{url_for('static', filename='fonts/NotoSans-Regular.ttf')}}");
}

请求被发送到

http://127.0.0.1:5000/static/css/static/fonts/NotoSans-Regular.ttf

（假设服务器在 PORT 5000 上运行）

所以，我将其替换为以下内容，并且效果很好。

@font-face {
  font-family: 'NotoSans';
  src: url("/static/fonts/NotoSans-Regular.ttf");
}

【讨论】：