内联CSS background:url()在Jinja2模板中不起作用 [英] Inline CSS background:url() not working in Jinja2 template
问题描述
我在使Bootstrap Carousel响应并缩放动态图像的高度和宽度时遇到问题.我发现的一种解决方法是使用:background: url(path_to_image.jpg) no-repeat center center;
,其中似乎可以正常工作. >
现在,我正在尝试将代码分解到Flask/Jinja应用程序中:
#hp {
height: 250px;
width: 100%;
background-color: gray;
/* background: url(https://ununsplash.imgix.net/photo-1427348693976-99e4aca06bb9) no-repeat center center; */
background-size: cover;
}
<div id="hp" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#hp" data-slide-to="0" class="active"></li>
<li data-target="#hp" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!-- Wrap slides 1 -->
<div class="item active">
<div style="background: url(https://ununsplash.imgix.net/photo-1427348693976-99e4aca06bb9) no-repeat center center / cover;">
</div>
</div>
<!-- Wrap slides 2 -->
<div class="item"></div>
</div>
<!-- codes for Controls follows -->
</div>
对于真实代码,我尝试了以下变体:
<img src="{{url_for('.static', filename='img/works2_big.jpg')}}" class="center-block">
和这个:
<div style="background: url(../static/img/works2_big.jpg) no-repeat center center;">
</div>
我什至对此也持弹道态度.
<div style="background: url({{url_for('.static', filename='img/works2_big.jpg')}}) no-repeat center center"></div>
仍然没有显示.我使用的Flask蓝图的静态文件定义正确,并包含我的工作CSS和JS文件.
main = Blueprint('main', __name__, template_folder='templates', static_folder='static')
还有另一种方法可以正确地将此内联CSS插入Jinja吗?
尝试一下:
<img src="background-image: url({% static 'img/works2_big.jpg' %})" class="center-block">
I'm having problem making the Bootstrap Carousel responsive and scaling height and width of dynamic images. One work around I found was to use: background: url(path_to_image.jpg) no-repeat center center;
which seems to work okay.
Now, I'm trying to factor the code into a Flask/Jinja application:
#hp {
height: 250px;
width: 100%;
background-color: gray;
/* background: url(https://ununsplash.imgix.net/photo-1427348693976-99e4aca06bb9) no-repeat center center; */
background-size: cover;
}
<div id="hp" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#hp" data-slide-to="0" class="active"></li>
<li data-target="#hp" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!-- Wrap slides 1 -->
<div class="item active">
<div style="background: url(https://ununsplash.imgix.net/photo-1427348693976-99e4aca06bb9) no-repeat center center / cover;">
</div>
</div>
<!-- Wrap slides 2 -->
<div class="item"></div>
</div>
<!-- codes for Controls follows -->
</div>
For the real code, I've tried the following variations:
<img src="{{url_for('.static', filename='img/works2_big.jpg')}}" class="center-block">
and this one:
<div style="background: url(../static/img/works2_big.jpg) no-repeat center center;">
</div>
I even went ballistic on this one:
<div style="background: url({{url_for('.static', filename='img/works2_big.jpg')}}) no-repeat center center"></div>
still no show. I'm using a Flask blueprint with my static file well defined and contained my working css and js files.
main = Blueprint('main', __name__, template_folder='templates', static_folder='static')
Is there another way I can correctly insert this inline css into jinja?
Try this:
<img src="background-image: url({% static 'img/works2_big.jpg' %})" class="center-block">
这篇关于内联CSS background:url()在Jinja2模板中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!