如何将通过外键链接的对象图像传递到模板中?

时间:2019-10-08 14:14:40

标签: python django django-templates

我在获取Django项目中附加到Car模型对象的图像的URL时遇到麻烦。

目标是从上传的集合中获取单个图像(也许是一个pk,或者第一个要上传的图像),以用作列表视图中的缩略图。

我已经通过管理员上传了图片,但是我无法从模板中获取单个图片。

我尝试使用<img src="{{ car.image.url }}">(当我的图像字段属于Car模型的一部分时,该方法有效)。

在呈现的模板中查看此内容时,它只是替代文本。浏览开发人员工具显示src(unknown)

models.py


class Car(models.Model):
    manufacturer = models.ForeignKey('Manufacturer', on_delete=models.SET_NULL, null=True)
    car_model = models.CharField('Model', max_length=50, null=True)
    description = models.TextField(max_length=4000)
    vin = models.CharField('VIN', max_length=17, help_text='Enter the 17 character VIN number.', blank=True, null=True)
    mileage = models.IntegerField(verbose_name='Mileage')
    date_added = models.DateTimeField(auto_now_add=True)
    engine_displacement = models.CharField(default=2.0, max_length=3, help_text="Engine displacement in Liters (E.g. 2.0, 4.2, 6.3)")
    price = models.IntegerField(default=0)

    seller = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True)

    id = models.UUIDField(primary_key=True, default=uuid.uuid4,
    help_text="Unique ID for this car")
...

class Image(models.Model):
    car = models.ForeignKey(Car, on_delete=models.SET_NULL, null=True)
    image = models.ImageField(upload_to=image_directory_path)

模板渲染

 {% for car in most_recently_uploaded %}
                            <div class="col-xs-3 product-item" style="width:400px">
                                <figure class="figure"></figure>
                                    <a href="{{ car.get_absolute_url }}"><img src="{{ car.image.url }}" class="figure-img img-fluid" alt="{{ car.manufacturer }} {{ car.car_model }} image" ></a>
                                    <figcaption class="figure-caption"><a href="{{ car.get_absolute_url }}" class="btn btn-link"><strong>{{ car.model_year }} {{ car.manufacturer }} {{ car.car_model }}</strong></a></figcaption>
                                </figure>
                            </div>
                        {% endfor %}     

1 个答案:

答案 0 :(得分:1)

您无需将其传递给模板。通过反向外键在那里访问它。

<img src="{{ car.image_set.first.image.url }}"