[Python] Django - How to display image file in template

What I am trying to accomplish?: I uploaded multiple images(3) and I am trying to display each images in different image tag. Here is my code;

How are you doing it?: I have attached my code to the question and explained the difficulties I have found in the code.

codes below;

Models.py

class MultipleFile(models.Model):
post = models.ForeignKey(Post, on_delete=models.CASCADE, null=True, blank=True)
files = models.FileField(upload_to ='PostImages/%Y/%m/%d/', null=True, blank=True)
is_image = models.BooleanField(default=False)
is_video = models.BooleanField(default=False)


Views.py

def ForYouView(request):
page_title = "For You"

#All posters posts
poster_profile = Post.objects.filter(
Q(poster_profile=request.user))

#Post form
if request.method == "POST":
form = PostForm(request.POST)
form_upload = MultipleFileForm(request.POST, request.FILES)

if form.is_valid() and form_upload.is_valid():
post = form.save(commit=False)
post.poster_profile = request.user
post.save()
form.save_m2m()

my_files = request.FILES.getlist('files')
for items in my_files:
post_files = MultipleFile.objects.create(post=post, files=items)

# Determine if it's an image or video based on mime type
mime_type, _ = mimetypes.guess_type(post_files.files.name)
if mime_type and mime_type.startswith('image/'):
post_files.is_image = True
elif mime_type and mime_type.startswith('video/'):
post_files.is_video = True

post_files.save()
return redirect('site:foryou_view')

else:
form = PostForm()
form_upload = MultipleFileForm()

context = {
'page_title': page_title,
'poster_profile': poster_profile,
'form': form,
'form_upload': form_upload,
}
return render(request, 'foryou.html', context)


Template.html

{% if poster_profile %}
{% for user in poster_profile %}
{% if user.multiplefile_set.all|length == 3 %}

{% for field in user.multiplefile_set.all %}

#I want the first image to display on this tag
{% if field.is_image == True %}
<img src="{{ field.files.url }}" alt="img"/>
{% endif %}

#I want the second image to display on this tag
{% if field.is_image == True %}
<img src="{{ field.files.url }}" alt="img"/>
{% endif %}

#I want the third image to display on this tag
{% if field.is_image == True %}
<img src="{{ field.files.url }}" alt="img"/>
{% endif %}
{% endfor %}

{% endif %}
{% endfor %}
{% endif %}


What I have tried but not working for me:

#I want the first image to display on this tag
{% if field.0.is_image == True %}
<img src="{{ field.files.url }}" alt="img"/>
{% endif %}
#I want the second image to display on this tag
{% if field.1.is_image == True %}
<img src="{{ field.files.url }}" alt="img"/>
{% endif %}
#I want the third image to display on this tag
{% if field.2.is_image == True %}
<img src="{{ field.files.url }}" alt="img"/>
{% endif %}


However, it does not work. Images do not appear. Any suggestions ?

Continue reading...