Jinja2设置背景图片

5

我正在尝试使用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文件和一个布局文件,它们为模板提供默认行为。我该如何使用一张漂亮的背景图片?

1个回答

5

你似乎试图告诉前端在没有传递正确命令的情况下使用应用路由。我假设你在使用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文件中。

嗨,我没有问题提供图像,而且似乎你正在提供如何做到这一点的提示。相反,我刚刚发现设置<body background="{{'/images/'+commPageData.background_image}}">不会添加背景。我可以像这样插入图像:<img src="{{''/images/'+commPageData.background_image'}}" style="width:304px;height:228px;">。我只是不能制作背景。这可能与css和layout.html有更多关系,我不确定。 - user442920
1
<body background已经被弃用,所以它可能会取决于您的浏览器。最好使用CSS,例如 <body style="background:url({{'images/'+commPageData.background_image}});"> 或直接将其放入CSS文件中。 - tadamhicks
嘿,那就是问题所在。谢谢。我将您的原始帖子标记为答案,您可能需要编辑它以添加您的评论...不知道这是否有意义。 - user442920

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接