jinja2设置背景图像 [英] jinja2 set background image

查看:444
本文介绍了jinja2设置背景图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



作为一个例子,我试过这个:

  {%extendslayout.html%} 

{%block body%}
{%if current_user.is_authenticated%}
{%if commPageData.background_image%}
< body background ={{'/ images /'+ commPageData。 background_image}}>
{%else%}
< body>
{%endif%}
事物
< / body>

我有一个css文件和一个布局文件,给出了模板的默认行为。我怎么能有一个很好的背景图片,我正在服务?

解决方案

你似乎试图告诉前端使用应用程序路由而不传递正确的命令。我假设你正在使用Flask。真的,有两种方法(我可以想到)把这个面包切成薄片,而这只取决于你。首先是使用标准的html,而不是嵌入python来路由应用程序来查找文件,如下所示:

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

但是,如果您想利用框架和模板,那么您应该使用built在方法url_for中

看起来像这样:

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

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

现在,我不确定commPageData.background_image是从哪里来的。我的代码片断假定它被认为是一个值,它会识别是否返回逻辑,如果这是有道理的,它需要在你告诉url_for方法寻找它,即使动态生成。如果你真的有一个特定的图像,你想要渲染为背景,它需要适当地指定:

 <正文背景={{url_for('static',filename ='image.jpg')}}> 

当然,在HTML5中已经被弃用了,并且在许多浏览器中可能无法正确渲染。我们更喜欢用CSS代替

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

或者直接放在您的CSS文件中


I am trying to set the background image using jinja2. I have managed to serve my file from my dev server and can post the image in the document, but I want it to form a nice background with everything else on top.

As an example, I tried this :

{% 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>

I have a css file and a layout file that gives the default behaviour for a template. How can I have a nice background image which I am serving?

解决方案

You seem to be trying to tell the front end to use application routing without passing it the right commands. I'm assuming you're using Flask. Really, there are two ways (that I can think of) to slice this bread, and it just depends on you. The first is just using standard html and not embedding python to route the app to look for the file, and looks like:

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

But, if you want to take advantage of the framework and the template, then you should use the built in method url_for

It looks something like this:

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

'static' being the directory in the application where this image lives.

Now, I'm not sure where commPageData.background_image is coming from in your app. My code snip assumes it is being served as a value it will recognize if passed back to the logic, if that makes sense, and it needs to be where you tell the url_for method looks for it, even when dynamically generated. If you actually have a specific image you want to render as the background, it needs to be specified appropriately:

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

Of course, has been deprecated in HTML5 and may not render appropriately in many browser. It is much preferred to use CSS instead with

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

or put it directly in your CSS file

这篇关于jinja2设置背景图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆