在django模板中选择图像外键的第一张图像答案

【问题标题】：Select first image of image foreign key in django template在django模板中选择图像外键的第一张图像
【发布时间】：2022-01-23 09:31:47
【问题描述】：

我想选择对象属性集的第一张图片。我使用 PropertyImages 模型的外键创建了一个属性模型。如何访问模板中属性 object_set.all 的第一个图像。我不想在视图函数中这样做，因为它应该在 base.html 文件中。

代码：

{% for property in properties %}
        
        <div
          style="background-image: url('{{property.propertyimages_set.all|first.url}}'); background-size: 100% 100%; "
          ;
          class="tm-row-featured"
        >
          <div class="featured-content">
            <p><span>Name: </span>{{property.property_name}}</p>
            <hr>
            <p><span>Type: </span>{{property.property_type}}</p>
            <p><span>Price: </span>&#8358;{{property.price}}</p>
            <p><span>Location: </span>{{property.property_state}}</p>
            <p><a href="{% url 'property_details' property.property_slug %}">More info 
            >>></a></p>
          </div>
        </div>
        {% endfor %}

【问题讨论】：

标签： python django django-models django-templates

【解决方案1】：

您可以使用 forloop.first 来检查循环是否首先执行，然后使用适当的 if 标记来显示图像。请从以下链接查看 for 循环相关变量：

参考：https://docs.djangoproject.com/en/4.0/ref/templates/builtins/#for

{% if forloop.first %}
 # Show first image here

{% endif %}

【讨论】：

【解决方案2】：

试试这个：

Ref

<div style="background-image: url('{{properties.0.propertyimages_set.url}}'); background-size: 100% 100%;"; class="tm-row-featured">
    <div class="featured-content">
        <p><span>Name: </span>{{properties.0.property_name}}</p>
        <hr>
        <p><span>Type: </span>{{properties.0.property_type}}</p>
        <p><span>Price: </span>&#8358;{{properties.0.price}}</p>
        <p><span>Location: </span>{{properties.0.property_state}}</p>
        <p><a href="{% url 'property_details' properties.0.property_slug %}">More info >>></a></p>
    </div>
</div>

【讨论】：

【解决方案3】：

上面的解决方案对我不起作用。因此，我终于找到了解决方法：

{% for property in properties %}
        
        
        <div
        
        {% with  property.propertyimages_set.all|first as photo %} style="background-image: url('{{photo.image.url}}'); background-size: 100% 100%; "
          ; {% endwith %}
          class="tm-row-featured"
        >
          <div class="featured-content">
            <p><span>Name: </span>{{property.property_name}}</p>
            <hr>
            <p><span>Type: </span>{{property.property_type}}</p>
            <p><span>Price: </span>&#8358;{{property.price}}</p>
            <p><span>Location: </span>{{property.property_state}}</p>
            <p><a href="{% url 'property_details' property.property_slug %}">More info >>></a></p>
          </div>
        </div>
        {% endfor %}
      </div>

【讨论】：