Images not showing when running for loop to fetch images

user_2521785 0
Viewed 423

I have a for loop in my index.html file to dynamically fetch images from the images folder for three objects.

But it is only fetching the first image, with that missing image icon showing on the server for the other two 'destination' objects. Is there anything standing out as amiss in the index.html and views.py files?

All three images were showing when they were hardcoded and are all present in the images folder. It's since I introduced the {% static "images" as baseUrl %} and the for loop that it doesn't work. It's just odd that it does indeed load the first image, but not image 2 and image 3.

I also tried: src = "static/images/{{dest.img}}" instead of src = "{% static 'images/{{dest.img}}' %} and this didn't work.

Here is the for loop code with the top imports in index.html:

{% load static %}
{% static "images" as baseUrl %}


                {% for dest in dests %}

                <!-- Destination -->
                <div class="destination item">
                    <div class="destination_image">
                        <img src="{{baseUrl}}/{{dest.img}}" alt="">
                        <div class="spec_offer text-center"><a href="#">Special Offer</a></div>
                    </div>
                    <div class="destination_content">
                        <div class="destination_title"><a href="destinations.html">{{dest.name}}</a></div>
                        <div class="destination_subtitle"><p>{{dest.desc}}</p></div>
                        <div class="destination_price">From ${{dest.price}}</div>
                    </div>
                </div>

                {% endfor %}

In my views.py file:

from django.shortcuts import render
from .models import Destination


def index(request):

    dest1 = Destination()
    dest1.name = 'New York'
    dest1.desc = 'City that never sleeps'
    dest1.img = 'destination_1.jpg'
    dest1.price = 500

    dest2 = Destination()
    dest2.name = 'Mumbai'
    dest2.desc = 'Great nightlife'
    dest1.img = 'destination_2.jpg'
    dest2.price = 800

    dest3 = Destination()
    dest3.name = 'Paris'
    dest3.desc = 'The City Of Culinary Delights'
    dest1.img = 'destination_3.jpg'
    dest3.price = 700

    dests = [dest1, dest2, dest3]
    #     'dest1': dest1,
    #     'dest2': dest2,
    #     'dest3': dest3,
    # }

    return render(request, 'index.html', {'dests': dests})
django python
2 Answers

if your image is uploaded you could not fetch it like this dest.img just do it like dest.img.url and there is no need of loading this {% static "images" as baseUrl %} because this is used when you are reflecting images from static but when you start work on database and you are uploading images you have to do it like the following one

{% load static %}

                {% for dest in dests %}

                <!-- Destination -->
                <div class="destination item">
                    <div class="destination_image">
                        <img src="{{dest.img.url}}" alt="">
                        <div class="spec_offer text-center"><a href="#">Special Offer</a></div>
                    </div>
                    <div class="destination_content">
                        <div class="destination_title"><a href="destinations.html">{{dest.name}}</a></div>
                        <div class="destination_subtitle"><p>{{dest.desc}}</p></div>
                        <div class="destination_price">From ${{dest.price}}</div>
                    </div>
                </div>

                {% endfor %}

and if this doesn't help you please let me know if there could be any further help

user_135368930

I got it, the variable assignments were buggy. That's why it didn't return any string for {{dest.img}} and thus couldn't link to the images. You assigned dest1.img multiple. See fixed solution:

def index(request):

    dest1 = Destination()
    dest1.name = 'New York'
    dest1.desc = 'City that never sleeps'
    dest1.img = 'destination_1.jpg'
    dest1.price = 500

    dest2 = Destination()
    dest2.name = 'Mumbai'
    dest2.desc = 'Great nightlife'
    dest2.img = 'destination_2.jpg' # wrong variable assignment
    dest2.price = 800

    dest3 = Destination()
    dest3.name = 'Paris'
    dest3.desc = 'The City Of Culinary Delights'
    dest3.img = 'destination_3.jpg' # wrong variable assignment
    dest3.price = 700

    dests = [dest1, dest2, dest3]
    #     'dest1': dest1,
    #     'dest2': dest2,
    #     'dest3': dest3,
    # }

    return render(request, 'index.html', {'dests': dests})
user_120011220
Related