Django模板中如何通过外键获取Product关联的图片？

问题说明 #

你在Django项目中定义了Product和Product_Image关联模型，视图已将所有商品数据传递到模板，但模板中图片路径的写法错误，导致无法正常显示关联图片，且无报错提示。

模型代码 #

class Product(models.Model):
    Product_Type=models.CharField(max_length=25)
    Product_Name=models.CharField(max_length=25)
    Product_Size=models.IntegerField(null=True)
    Product_Price=models.FloatField()

    def first_image(self):
        # 获取关联的第一张图片
        return self.images.first()
    
    def __str__(self):
        return self.Product_Name

class Product_Image(models.Model):
    Product_name=models.ForeignKey(Product, related_name="images", on_delete=models.CASCADE)
    Product_Image=models.ImageField(upload_to="images/")
     
    def __img__(self):
        return self.Product_Image

视图代码 #

def index(request):
    new_products = Product.objects.all()
    context = {'new_products': new_products}
    return render(request, "Genesis/home.html", context)

错误的模板代码片段 #

{%if new_products %}
     {%for product in new_products%}
          <div class="col mb-5">
              <div class="card h-100">
                   <!-- Product image-->
                            
             <img src="{{ Product_name.first_image.images.url }}" alt="Product Image">
                 <!-- Product details-->
                 <div class="card-body p-4">
                      <div class="text-center">
                           <!-- Product name-->
                             <h5 class="fw-bolder">{{product.Product_Type}}</h5>
                                 <!-- Product price-->
                              $40.00 - $80.00
                                </div>

修正方案 #

模板中的错误主要是变量名误用和字段访问路径错误，以下是修正后的模板代码：

{% if new_products %}
     {% for product in new_products %}
          <div class="col mb-5">
              <div class="card h-100">
                   <!-- Product image-->
                   {% if product.first_image %}
                       <img src="{{ product.first_image.Product_Image.url }}" alt="Product Image">
                   {% else %}
                       <!-- 无关联图片时的占位内容 -->
                       <img src="/static/images/default-product.jpg" alt="暂无图片">
                   {% endif %}
                 <!-- Product details-->
                 <div class="card-body p-4">
                      <div class="text-center">
                           <!-- Product name-->
                           <h5 class="fw-bolder">{{ product.Product_Name }}</h5>
                           <!-- Product price-->
                           ${{ product.Product_Price }}
                      </div>
                 </div>
              </div>
          </div>
     {% endfor %}
{% endif %}

关键修正点 #

• 变量名统一：循环变量是product，不能错误使用Product_name
• 字段访问正确：product.first_image返回的是Product_Image实例，需直接访问其Product_Image字段的url属性
• 增加空值判断：用{% if product.first_image %}避免商品无关联图片时出现异常
• 修正硬编码内容：替换商品名称和价格为模型对应字段，保证数据一致性

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