saad.sawash
saad.sawash

Reputation: 231

Django 404 error when loading <img> tag inside template

I have ~26k pictures inside my static folder that I want to load using a template that I have in Django

{% for movie in movies %}
                <div class="col-6 col-sm-12 col-lg-6">
                    <div class="card card--list">
                        <div class="row">
                            <div class="col-12 col-sm-4">
                                <div class="card__cover">
                                    <img src="{% static 'img/covers/{{ movie.movie_id }}.jpg' %}">
                                    <a href="/movie/{{ movie.movie_id }}" class="card__play">
                                        <i class="icon ion-ios-play"></i>
                                    </a>
                                </div>
                            </div>

                            <div class="col-12 col-sm-8">
                                <div class="card__content">
                                    <h3 class="card__title"><a href="/movie/{{ movie.movie_id }}">{{ movie.movie_title}}</a></h3>
                                    <span class="card__category">

                                        <a href="#">Comedy</a>
                                        <a href="#">Adventure</a>

                                    </span>

                                    <div class="card__wrap">
                                        <span class="card__rate"><i class="icon ion-ios-star"></i>{{ movie.movie_rating }}</span>

                                        <ul class="card__list">
                                            <li>HD</li>
                                            <li>16+</li>
                                        </ul>
                                    </div>

                                    <div class="card__description">
                                        <p>{{ movie.movie_overview }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}

The line

<img src="{% static 'img/covers/{{ movie.movie_id }}.jpg' %}">

is where I am facing an issue, the console shows img/covers/&7B&Dmovie.movie_id&3B&D.jpg

Upvotes: 0

Views: 58

Answers (1)

IVNSTN
IVNSTN

Reputation: 9308

Move nested curly braces outside:

<img src="{% static 'img/covers/' %}{{ movie.movie_id }}.jpg">

static template tag only converts relative "static" url to "absolute" one, so appending some details like filename or query params like shown is fine.

Upvotes: 2

Related Questions