Изображение-пейсхолдер не загружается корректно при использовании 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' %}" />
Вернуться на верх