Как изменить путь к изображению при размещении ссылки на него в HTML-шаблоне?

При нажатии на категорию пользователю должны быть показаны все товары, которые находятся в этой категории. Однако, когда я нажимаю на категорию, изображения товаров не показываются, потому что поиск изображений осуществляется по CATEGORY/media/images/... (CATEGORY - название категории), а не просто /media/images/... Это может быть связано с тем, что путь веб-страницы начинается с названия самой категории, поэтому при поиске изображений используется путь

Как изменить путь, по которому осуществляется поиск изображений?

urls.py:

path('<str:name>/', views.category, name='category')
# so this would end up as a /Electronics/ if the Electronics category was clicked on
# so I think that this is why the image are searched from the wrong path - it is searched from /Electronics/media/images/...

category.html:

<div class="listings-container">
     {% for i in listings %}
        <div class="listing">
            {% if i.photo_present != None %}
            <div class="img-container">
                {% if i.photo_url != None %}
                <div class="img-center">
                    <a href="{% url 'listing' i.pk i.name %}">
                        <img src=" {{ i.photo_url }} " alt="">
                    </a>
                </div>
                {% else %}
                <div class="img-center">
                    <a href="{% url 'listing' i.pk i.name %}">
                        <img src=" media/{{ i.photo_upload }} " alt="">
                    </a>
                </div>
                {% endif %}
            {% endif %}
        </div>
    {% endfor %}
</div>

views.py: (не имеет отношения к делу, но помогает понять HTML)

def category(request, name):
    category = Category.objects.get(name=name)
    listings = Listing.objects.all()
    list = []
    for i in listings:
        if i.category == category:
            list.append(i)
    return render(request, 'auctions/category-page.html', {
        'category': category,
        'listings': list
    })

index.html: (изображение показано на этой странице - здесь для сравнения):

<div class="listings-container">
    {% for i in listings %}
        <div class="listing">
            {% if i.photo_present != None %}
            <div class="img-container">
                {% if i.photo_url != None %}
                <div class="img-center">
                    <a href="{% url 'listing' i.id i.name %}">
                        <img src=" {{ i.photo_url }} " alt="">
                    </a>
                </div>
                {% else %}
                <div class="img-center">
                    <a href="{% url 'listing' i.id i.name %}">
                        <img src=" media/{{ i.photo_upload }} " alt="">
                    </a>
                </div>
                {% endif %}
            {% endif %}          
        </div>
    {% endfor %}
</div>

сначала: Я ничего не знаю о ваших моделях, но вам не нужно слишком много циклов if и for в листингах:

listings = Listing.objects.filter(category=category, photo_present__isnull=False)

во втором: Вы неправильно работаете с относительными путями:

<img src="{{ i.photo_url }}" alt="">

Вы получаете src="site/category/path_to_image.ext" я могу представить, что вы хотите:

<img src="/{{MEDIA_URL }/{{ i.photo_url }}" alt="HERE SHOUD BE SOMETHING">

Читайте подробнее здесь: https://www.w3schools.com/html/html_filepaths.asp

Вернуться на верх