Unabe to load Dynamic images using loop counter in django

Question

I am unable to load th image using loop counter.

Its loading the page http://localhost:8000/static/images/png%7B%7Bforloop.counter%7D%7D.png

instead of http://localhost:8000/static/images/png1.png http://localhost:8000/static/images/png2.png

def html(request):
    # template = loader.get_template('index.html')
    # return HttpResponse(template.render())
    params = {'movie':['Dr Strange','Shamsheera']}
    return render(request, 'index.html',params)

    <table style="width:100%">
        {% for m in movie %}
            <tr>
            <td width="30%"><img src="{% static 'images/png{{forloop.counter}}.png' %}" alt="{{forloop.counter}}"></td>
            <td width="20%">{{m}}</td>
            <td width="50%">Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam explicabo asperiores est nostrum mollitia dignissimos unde sapiente quos deserunt eveniet placeat beatae neque incidunt quia nulla itaque voluptatum earum, repudiandae enim cum fugiat nisi magnam dolorem? Deserunt odit, repellat eius qui asperiores adipisci soluta blanditiis inventore dignissimos est et nesciunt porro, iusto, ex at consectetur obcaecati unde! Dolorem rerum veniam mollitia, provident, sunt officiis maxime maiores atque cumque consequatur quidem molestias amet ullam? Iure pariatur, tempora voluptatem sint, quidem eius vel nemo eveniet eaque unde doloremque. Adipisci, maiores corrupti, ut debitis, error odio omnis odit id ratione enim minima a!</td>
            </tr>
        {% endfor %}
      </table>

score 0 · Answer 1 · answered Jul 07 '22 at 07:10

You are trying to use a variable in a template tag but it doesn't work. You can do by concatenating strings with the add template filter:

   <table style="width:100%">
        {% for m in movie %}
            <tr>
            <td width="30%">
              {% with 'images/png'|add:forloop.counter as image %}
                       <img src="{% static image %}" alt="{{forloop.counter}}">
              {% endwith %}

</td>
            <td width="20%">{{m}}</td>
            <td width="50%">Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam explicabo asperiores est nostrum mollitia dignissimos unde sapiente quos deserunt eveniet placeat beatae neque incidunt quia nulla itaque voluptatum earum, repudiandae enim cum fugiat nisi magnam dolorem? Deserunt odit, repellat eius qui asperiores adipisci soluta blanditiis inventore dignissimos est et nesciunt porro, iusto, ex at consectetur obcaecati unde! Dolorem rerum veniam mollitia, provident, sunt officiis maxime maiores atque cumque consequatur quidem molestias amet ullam? Iure pariatur, tempora voluptatem sint, quidem eius vel nemo eveniet eaque unde doloremque. Adipisci, maiores corrupti, ut debitis, error odio omnis odit id ratione enim minima a!</td>
            </tr>
        {% endfor %}
      </table>

And also, custom template tags are helpful in your case.

Unabe to load Dynamic images using loop counter in django

1 Answers1