Question

我正在尝试使用jinja2设置背景图片。我已经设法从我的开发服务器提供我的文件，并可以在文档中发布图像，但我希望它能够形成一个很好的背景，其他一切都在顶部。

举个例子，我试过这个：

{% extends "layout.html" %}

{% block body %}
  {% if current_user.is_authenticated %}
    {% if commPageData.background_image %}    
        <body background="{{'/images/'+commPageData.background_image}}">
    {% else %}
        <body>
    {% endif %}
            A thing
         </body>

我有一个css文件和一个布局文件，它提供了模板的默认行为。我怎样才能拥有一个很好的背景图像？

Answer 1

您似乎试图告诉前端使用应用程序路由而不传递正确的命令。我假设你正在使用Flask。真的，有两种方法（我能想到）切片这个面包，它只取决于你。第一种是使用标准的html而不是嵌入python来路由应用程序来查找文件，看起来像：

<body background="/path/to/image.jpg">

但是，如果你想利用框架和模板，那么你应该使用内置方法url_for

它看起来像这样：

<body background="{{ url_for('static', filename=commPageData.background_image) }}">

'static'是此图像所在应用程序中的目录。

现在，我不确定应用程序中的commPageData.background_image来自哪里。我的代码片段假设它被作为一个值传递回逻辑，它将被识别，如果这是有意义的，它需要在你告诉url_for方法寻找它的地方，即使是动态生成的。如果您确实要将特定图像渲染为背景，则需要对其进行适当指定：

<body background="{{ url_for('static', filename='image.jpg') }}">

当然，HTML5中已弃用，可能无法在许多浏览器中正确呈现。更喜欢使用CSS代替

<body style="background:url({{'images/'+commPageData.background_image}});">

或直接将其放在CSS文件中

jinja2设置背景图像

1 个答案: