Как изменить путь к изображению при размещении ссылки на него в 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