Accessing a ManyToManyField in template - django

Question

I am attempting to build a portfolio website and the idea was having a 'Project' model that contains multiple instances of an image. I think I was able to achieve this by using the 'ManyToManyField' relationship.
class Image(models.Model):
image = models.ImageField(upload_to='media/')
class Project(models.Model):
title = models.CharField(max_length=32)
description = models.TextField(default='', null=False)
stack = models.TextField(default='', null=False)
image = models.ManyToManyField(Image, related_name='images')
def __str__(self):
return self.title
From messing around a bit with the querying API, I've been able to retrieve the querysets for the images, but I am unsure how to keep those associated with their project and feed them into the context of my view. I already pass in an all() query for my Projects model (which is great), but I want to access the images as well.
Basically, I want my HTML template to end up looking like this:
{% for project in projects %}
<div class="card mx-auto" style="width: 50rem;">
<img class="card-img-top" src="{{ project.images }}" alt=""> // Issue here
<div class="card-body">
<p>{{ project }}</p>
<h5 class="card-title">{{project.title}}</h5>
<p class="card-text">{{project.description}}</p>
<p class="card-text">{{project.stack}}</p>
</div>
</div>
{% endfor %}
And here is the view:
def portfolio_view(request, *args, **kwargs):
p = Project.objects.all()
for project in p:
print('title: ', project.title)
print('description: ', project.description)
print('stack: ', project.stack)
print('images: ', project.image.all())
context = {
'projects': Project.objects.all(),
}
return render(request, 'main/portfolio.html', context)
Anything above the context object is just from testing.
Any help would be appreciated! Thanks a bunch!

Answer 1

Since you used a ManyToMany field, this means each project can have many images (and conversely each image can have many projects).
In this case you'll need to do something like this in your template:
{% for project in projects %}
...
{% for image in project.images.all %}
<img class="card-img-top" src="{{ image.image.url }}" alt="">
{% endfor %}
...
{% endfor %}
Let's assume we want only one image per project (and conversely only one project per image) i.e. a OneToOne field.
Your template would look like:
{% for project in projects %}
...
<img class="card-img-top" src="{{ project.image.image.url }}" alt="">
...
{% endfor %}