在模板的 css 中使用 jinja2 显示图像答案

【问题标题】：Displaying images using jinja2 in the css of a tempate在模板的 css 中使用 jinja2 显示图像
【发布时间】：2020-07-21 10:26:34
【问题描述】：

在一个烧瓶项目中，使用 BeautifulSoup 我正在使用来自 codepen.io 的以下前端设计

https://codepen.io/drehimself/pen/QNXpyp

在我的 html 模板中。我有一个网络抓取的图像列表，并希望使用 jinja2 显示它们而不是现有图像。

请注意，图像包含在 CSS 中。

.clash-card__image {
  position: relative;
  height: 230px;
  margin-bottom: 35px;
  border-top-left-radius: $border-radius-size;
  border-top-right-radius: $border-radius-size;
}

.clash-card__image--barbarian {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/barbarian-bg.jpg");
  img {
    width: 400px;
    position: absolute;
    top: -65px;
    left: -70px;
  }
}

到目前为止，我已经设法使用 jinja2 在模板的 html 或正文部分显示图像。由于图像在 CSS 中，我已经尝试过，但它不起作用。

{% for image, title in images_titles %}
.clash-card__image--barbarian {
  background: url("{{images");
 {% endfor %}

我已经尝试了上述的各种迭代，但无法显示图像。但是，我可以让 TITLE 显示，因为它在 html 中。

另一个问题是列表的大小不固定。我希望卡片能够复制，而不必在每个 css 引用中放入 {{image}} jinja 引用。

我的问题是：如何正确地将 jinja2 对图像的引用放入 css 中的图像列表中？

我们也感谢任何最佳实践和建议。

【问题讨论】：

标签： css flask web-scraping beautifulsoup jinja2

【解决方案1】：

我希望我的示例符合您的要求。我想如果你直接在元素中定义背景图片，你会省去很多麻烦。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>

    <!-- All resources from Clash of Clans Cards -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" />
    <link rel="stylesheet" href="{{ url_for('static', filename='main.css')}}" />
    <!-- End of resources from Clash of Clans Cards -->

    <style type="text/css">
      .clash-card__image {
        background-color: #1e1e1f;
        background-size: contain; /*cover or contains; decide for yourself*/
        background-repeat: no-repeat;
        background-position: center center;
      }
    </style>
  </head>
  <body>

    <div class="slide-container">
      {% for image,title in images_titles %}
      <div class="wrapper">
        <div class="clash-card" style="padding-bottom: 3.5rem;">
          <div class="clash-card__image" style="background-image: url({{image}});">
          </div>
          <div class="clash-card__unit-description">
            {{ title }}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

    <script type="text/javascript">

    (function() {

      var slideContainer = $('.slide-container');

      slideContainer.slick();

      $('.clash-card__image img').hide();
      $('.slick-active').find('.clash-card img').fadeIn(200);

      // On before slide change
      slideContainer.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
        $('.slick-active').find('.clash-card img').fadeOut(1000);
      });

      // On after slide change
      slideContainer.on('afterChange', function(event, slick, currentSlide) {
        $('.slick-active').find('.clash-card img').fadeIn(200);
      });

    })();

    </script>

  </body>
</html>

【讨论】：

【解决方案2】：

我猜你可能正在尝试在作为静态资产包含的 CSS 文件中使用 Jinja 表达式（通过 <link href='/some/file.css /> 之类的标签）。

这不起作用，因为这些外部资产从未由 Jinja 处理。

对此的快速解决方法可能是通过将其包含在<head> 中来将其保留在 HTML 模板中，如下所示：

<head>
  <link rel='stylesheet' type='text/css'>
    {% for image, title in images_titles %}
      .clash-card__image--barbarian {
        background: url("{{image}}");
      }
    {% endfor %}
  </link>
</head>

编辑：

什么是最好的做法，因为它肯定是经常需要的东西

CSS 文件本质上是静态的。静态资产部署的现代方法可能会将这些资产放在 CDN 上（或者如果使用像 nginx 这样的反向代理有 nginx 提供的 static 文件夹，因此 WSGI/app 服务器甚至不知道它们）。

考虑到这一点，此模板可能在构建时并未考虑到动态图像 URL。仔细观察，它似乎只是在 CSS 中加载 background 图像，而实际的字符图像是在 <img> 标记中加载的。因此，您可能正在研究在此模板中加载图像的两种方式。

由于您询问的是背景图片，您可以使用 Javascript 更改它。比如：

var elem = document.getElementsByClassName('clash-card__image--barbarian')[0];
elem.style.backgroundImage = "url('http://localhost:5000/some_image.jpg')"

然后，您可以使用 fetch API 从应用程序的端点动态加载 URL 字符串。这可能涉及更多的 Javascript 工作，在这个问题的上下文中很难展开。

如果没有 Javascript，如果您使用 Jinja2 语法放置该字符图像，可能会执行以下操作：

<div class="clash-card__image clash-card__image--archer">
  <img src="{{image}}" />
</div>

您可以通过修改父 div 以通过样式标签加载 CSS 来避免将 CSS 块放入 <head>：

<div style="background: url('{{bg_image}}');"
  class="clash-card__image clash-card__image--archer">

然后从外部 CSS 文件中删除该声明。

这与将 CSS 放在模板文件中的 <head> 内具有相同的效果：它都是由 Jinja2 在页面加载时呈现的。

【讨论】：

一个快速的解决方法，但最好的做法是什么，因为它肯定是经常需要的东西......
@MissComputing 查看我的编辑。希望这会有所帮助。如果它提出的问题多于解决的问题，请告诉我:-)