在模板中动态加载背景图片答案

【问题标题】：Dynamically load background image in template在模板中动态加载背景图片
【发布时间】：2021-04-30 13:14:41
【问题描述】：

我有一个列表对象如下：

<div role="list" class="w-clearfix w-dyn-items w-row">
    {% if latest_post_list %}
    {% for post in latest_post_list %}
    {% if post.is_published %}
    <div role="listitem" class="blog-thumbnail w-dyn-item w-col w-col-4">
        <a href="/{{ post.id }}" data-w-id="46150442-4efa-9d36-3a4c-20d527e7a6bc" class="thumbnail-wrapper w-inline-block">
        <div class="image-wrapper">
            <div style="-webkit-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="thumbnail-image"></div>
            <div class="category-tag">{{ post.category }}</div>
        </div>
        <div class="thumbnail-text">
            <div class="blog-title">{{ post.title}}</div>
            <div class="preview-text">{{ post.body}}</div>
        </div>
        <div class="thumb-details w-clearfix"><img src="" alt="" class="author-img">
            <div class="author-title">{{ post.author }}</div>
            <div class="thumbnail-date">{{ post.pub_date }}</div>
        </div>
        </a>
    </div>
        {% endif %}
        {% endfor %}
        {% else %}


    </div>
    <div class="w-dyn-empty">
        <p>No items found.</p>
    </div>
    {% endif %}
</div>

背景图片在样式表中设置：

  background-image: url('https://foo.bar.net/img/background-image.svg');

使用 Imagefield 将图像添加到类别模型中。

class Category(models.Model):
    created_at = models.DateTimeField('date created')
    updated_at = models.DateTimeField('date published')
    title = models.CharField(max_length=255)
    image = models.ImageField()

    class Meta:
        verbose_name = "Category"
        verbose_name_plural = "Categories"
        ordering = ['title']

    def __str__(self):
        return self.title

我希望将背景图片设置为上传的类别图片，如果为 null，则默认为当前 URL，但无法在模板中获取图片变量，即

background-image: url('../images/{{ category.image}}');

【问题讨论】：

标签： html css django django-models django-templates

【解决方案1】：

您应该能够将category 的图像添加到这样的背景中：

<div style="background-image: url({{ category.image.url }});"></div>

【讨论】：

另外，不要将您的媒体和静态文件与您的upload_to='static/' 混合使用。静态应该是不变的东西，比如你的 css 和 js，而不是来自模型实例的东西。
页面呈现时图像变量被剥离，我可能在这里遗漏了什么吗？ style="background-image: url();"
我将元素修改为以下内容，它至少显示了路径但仍然不渲染图像，这至少是朝着正确方向迈出的一步<div style="background: url('{{ post.category.image.url }}') 10% 10% no-repeat;"></div>
删除url模板标签调用中多余的''。见我的：url({{ category.image.url }})

【解决方案2】：

为了解决这个问题，我对列表对象进行了如下修改，从而达到了预期的效果：

          <div role="list" class="w-clearfix w-dyn-items w-row">
            {% if latest_post_list %}
            {% for post in latest_post_list %}
            {% if post.is_published %}
            <div role="listitem" class="blog-thumbnail w-dyn-item w-col w-col-4">
              <a href="/{{ post.id }}" data-w-id="46150442-4efa-9d36-3a4c-20d527e7a6bc" class="thumbnail-wrapper w-inline-block">
                <div class="image-wrapper">
                  <img src="{{ post.category.image.url  }}" loading="lazy" srcset="{{ post.category.image.url  }}"   alt="" class="thumbnail-image">
                  <div class="category-tag">{{ post.category }}</div>
                </div>
                <div class="thumbnail-text">
                  <div class="blog-title">{{ post.title}}</div>
                  <div class="preview-text">{{ post.body}}</div>
                </div>
                <div class="thumb-details w-clearfix"><img src="" alt="" class="author-img">
                  <div class="author-title">{{ post.author }}</div>
                  <div class="thumbnail-date">{{ post.pub_date }}</div>
                </div>
              </a>
            </div>
              {% endif %}
              {% endfor %}
              {% else %}


          </div>
          <div class="w-dyn-empty">
            <p>No items found.</p>
          </div>
          {% endif %}
        </div>

【讨论】：