Question

我使用带有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');
   min-height: 100%; }

解决方案应与此类似：

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

谢谢：）

Answer 1

您正在通过/static/css/style.css静态提供CSS。当您执行此操作时，Flask不会像使用模板一样使用Jinja来解析CSS文件。

但是，如果您有一条路由（例如@app.route('/css/<file>')），则可以使用render_template（）方法来呈现CSS文件，就像它是一个jinja模板一样，然后解析jinja指令（例如为{{url_for()}}）

Answer 2

由于通常不将Jinja渲染为模板，因此不能直接在CSS文件中使用Jinja，但是有3种替代方法可以满足您的需求：

方法1

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

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

方法2

将您的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;

Answer 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>

Answer 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);

Answer 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");
}