内联 CSS 背景：url() 在 Jinja2 模板中不起作用答案

【问题标题】：Inline CSS background:url() not working in Jinja2 template内联 CSS 背景：url() 在 Jinja2 模板中不起作用
【发布时间】：2015-06-19 22:42:14
【问题描述】：

我在让 Bootstrap Carousel 响应和缩放动态图像的高度和宽度时遇到问题。我发现的一种解决方法是使用：background: url(path_to_image.jpg) no-repeat center center; which seems to work okay.

现在，我正在尝试将代码分解为 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 中吗？

【问题讨论】：

它会为您的第一个代码示例生成什么错误或 css？
我也有这个问题。到目前为止没有工作。

标签： jquery html css twitter-bootstrap jinja2

【解决方案1】：

试试这个：

<img src="background-image: url({% static 'img/works2_big.jpg' %})" class="center-block">

【讨论】：