Django技术问题：如何在product_list.html中显示Product的ProductImage

阿华AIGC实验室

2026-5-20

解决Django模板中显示Product关联ProductImage的问题

嘿，我来帮你搞定这个模板调用关联模型的坑！你遇到的问题主要是没搞清楚Django反向关联的命名规则，还有模板语法的细节，咱们一步步来解决：

第一步：确认模型的反向关联命名

首先得看你的ProductImage模型里外键的定义，这决定了模板里怎么调用关联的图片：

如果你的外键设置了related_name，比如：

class ProductImage(models.Model):
    product = models.ForeignKey(Product, on_delete=models.CASCADE, related_name='images')
    image = models.ImageField(upload_to='product_images/')

那反向关联的名称就是你设置的images。

如果没设置related_name，Django会自动生成默认的反向关联名：小写模型名 + _set，也就是productimage_set。

第二步：模板里的正确写法

遍历product_list的时候，要根据上面的关联名来获取第一张图片，举个完整的示例：

{% for product in product_list %}
    <div class="product-card">
        <h4>{{ product.title }}</h4>
        <!-- 显示第一张关联图片 -->
        {% if product.images.first %}
            <img src="{{ product.images.first.image.url }}" alt="{{ product.title }}">
        {% else %}
            <p>暂无产品图片</p>
        {% endif %}
        <!-- 其他产品信息 -->
        <p>价格：{{ product.price }}</p>
    </div>
{% endfor %}

如果用默认的反向关联名，就把product.images换成product.productimage_set就行，比如{{ product.productimage_set.first.image.url }}。

你之前踩的坑解释

命名错误：你写的product.productImage是错的，Django里默认的反向关联名是全小写的模型名加_set，而且如果没设置related_name，不能直接用模型名调用。
语法报错：那个'productImage', expected 'empty' or 'endfor'的错误，大概率是你模板里的{% for %}标签没闭合，或者变量名写错导致模板解析失败，检查一下循环的开头和结尾是否配对。