CODEWITHSUNDEEP
pythondjangodjango-viewsdjango-templates
fbzyx
fbzyx

Reputation: 349

Display image in Template

I've been trying to display in my template an image that is stored in my model. but I can't. Could someone please tell me what I'm doing wrong?

Thank you in advance.

model.py:

class DeviceType(models.Model):
    type_name = models.CharField(primary_key=True, max_length=64, unique=True)
    type_description = models.TextField(max_length=512, blank=True)

    def __str__(self):
        return self.type_name

    def get_absolute_url(self):
        return reverse("devices:type-detail", kwargs={"pk": self.pk})


class DeviceTypeImage(models.Model):
    image_status = IntegerField(unique=True)
    image = models.ImageField(upload_to='images/types/')
    image_device_type = models.ForeignKey(DeviceType, on_delete=models.CASCADE, related_name='image')

    def __str__(self):
        return str(self.image_status)

    def get_absolute_url(self):
        return reverse("devices:type-detail", kwargs={"pk": self.pk})

view.py:

class DeviceTypeDetailView(DetailView):
    template_name = 'devices/type-detail.html'
    model = DeviceType

    def get_object(self):
        return get_object_or_404(DeviceType, pk=self.kwargs.get("pk"))

template:

<h1>Type detail</h1>

{{ object.type_name }}<br>
{{ object.type_description }}<br>
{{ object.image_status }}<br>
{{ object.image_device_type }}

<img src="{{ object.image.url }}" alt="...">

urls.py:

urlpatterns = [
    ....
    ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Upvotes: 1

Views: 416

Answers (1)

willeM_ Van Onsem
willeM_ Van Onsem

Reputation: 476493

object is a DeviceType, not a DeviceTypeImage. A DeviceType can furthermore have multiple DeviceTypeImages, so object.image is a manager of DeviceTypeImages: it can wrap zero, one or multiple images.

You thus access the images with:

{{ object.type_name }}<br>
{{ object.type_description }}<br>

{% for image in object.image.all %}
    {{ image.image_status }}
    <img src="{{ image.image.url }}">
{% endfor %}

Upvotes: 1

Related Questions