Изображение-пейсхолдер не загружается корректно при использовании Django
Я работаю над проектом, который отображает несколько объявлений, созданных пользователями. Если пользователь, создавший объявление, загрузил изображение, то отображается изображение, загруженное пользователем, в противном случае отображается картинка-заглушка, указывающая на отсутствие изображения. Это отображается как на индексной странице, где перечислены доступные объявления, так и в самом объявлении, если пользователь переходит туда.
Когда это делается на индексной странице, то работает без проблем, однако на странице листинга, несмотря на буквально тот же код, он не работает с изображением-заполнителем (если создатель листинга загрузил изображение, то оно отображается без проблем).
Урлы в файле settings.py следующие:
STATIC_URL = '/static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
And in urls.py:
urlpatterns = [
path("", views.index, name="index"),
...
path("listing/<int:listing_id>", views.listing, name="listing"),
...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
В обоих случаях (на индексной странице и на странице листинга), если я осмотрю элемент, мне будет показано: <img src="media/images/No-Image-Placeholder.png">
Однако, если я щелкну правой кнопкой мыши изображение и выберу открыть его в новом окне, из индекса (где это работает хорошо) адрес будет "http://127.0.0.1:8000/media/images/No-Image-Placeholder.png", в то время как из листинга (где это не работает) это будет "http://127.0.0.1:8000/listing/media/images/No-Image-Placeholder.png".
По какой-то причине он добавил "/listing/" к адресу изображения. Как запретить ему это делать?
Вот html: С индексной страницы
<a href="{% url 'listing' activo.id %}">
{% if activo.photo %}
<img src="{{ activo.photo.url }}" style="max-height: 300px; max-width: 500px"/>
{% else %}
<img src="media/images/No-Image-Placeholder.png" style="max-height: 300px; max-width: 500px"/>
{% endif %}
</a>
Страница листинга:
{% if listing.photo %}
<img src="{{ listing.photo.url }}" style="max-height: 300px; max-width: 500px"/>
{% else %}
<img src="media/images/No-Image-Placeholder.png" style="max-height: 300px; max-width: 500px"/>
{% endif %}
Код из файла views.py:
def index(request):
return render(request, "auctions/index.html", {"activos":Listing.objects.filter(active=True)}, )
def listing(request, listing_id):
if request.method == "GET":
listing_info = Listing.objects.get(pk=listing_id)
if request.user.is_authenticated:
if request.user.wishlist.filter(pk=listing_id).exists():
in_wishlist = True
else:
in_wishlist = False
else:
in_wishlist = False
comments = Comment.objects.filter(listing=listing_info)
return render(request, "auctions/listing.html", { 'listing':listing_info, 'form':BidForm(), 'num_ofertas':listing_info.bids.all().count(), 'in_wishlist':in_wishlist, 'comments':comments, 'commForm':CommentForm() })
Проблема в том, что ваш Listing добавляет свое местоположение к этому URL. Вы должны использовать тег шаблона static для обслуживания статических файлов, таких как изображения.
Итак, внесите следующие изменения в файлы шаблонов для обслуживания статического содержимого:
{% load static %} <!-- Put this at the top of your template -->
<img src="{% static 'images/No-Image-Placeholder.png' %}" />