Django模板中根据布尔值切换商品图片源的实现问题

你的原有代码问题在于遍历了商品关联的所有图片，且在循环内判断输出，所以只要满足条件的图片都会被渲染出来，不符合你「只展示一张优先级最高的图片」的需求。正确的思路是不用遍历全部图片，直接按优先级取第一张符合要求的图片即可。

方案1：直接在Django模板中实现 #

{% for product in products %}
    {% comment %} 先取标记为缩略图的第一张图片 {% endcomment %}
    {% with product.productimage_set.filter(thumbnail=True).first as thumb_image %}
        {% comment %} 再取所有关联图片的第一张作为备用 {% endcomment %}
        {% with product.productimage_set.first as fallback_image %}
            {% if thumb_image %}
                <img src="{{ thumb_image.image.url }}" alt="{{ product.title }}">
            {% elif fallback_image %}
                <img src="{{ fallback_image.image.url }}" alt="{{ product.title }}">
            {% else %}
                <img src="image template when no image at all" alt="{{ product.title }}">
            {% endif %}
        {% endwith %}
    {% endwith %}
{% endfor %}

方案2（更推荐）：逻辑下沉到模型层，模板更简洁 #

把图片选择逻辑封装到Product模型的自定义方法里，避免模板里写复杂逻辑，后续维护也更方便：

class Product(models.Model):
    title = models.CharField(max_length=120)

    def get_display_image_url(self):
        # 优先级1：取标记为缩略图的图片
        thumb_img = self.productimage_set.filter(thumbnail=True).first()
        if thumb_img:
            return thumb_img.image.url
        # 优先级2：取任意一张关联图片
        any_img = self.productimage_set.first()
        if any_img:
            return any_img.image.url
        # 优先级3：返回预设占位图
        return "image template when no image at all"

模板代码可以简化为：

{% for product in products %}
    <img src="{{ product.get_display_image_url }}" alt="{{ product.title }}">
{% endfor %}

内容的提问来源于stack exchange，提问作者OmletteDuFromage