Placeholder Image not Loading Correctly Using Django-CodePudding

I'm working on a project which displays several listings created by users. If the user who created the listing uploaded an image, it shows the image uploaded by the user, otherwise it shows a placeholder image indicating there is no image available. This is shown both on the index page which lists the available listings and in the listing itself if the user goes there.

When this is done in the index page it works without problems, however, on the listing page, despite being literally the same code, it doesn't work with the placeholder image (if the creator of the listing uploaded an image it shows without problems).

The urls in settings.py are:

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)

In both cases (from the index page and the listing page) if I inspect the element i'm shown: <img src="media/images/No-Image-Placeholder.png">

However, if I right click the image and choose to open it in a new window, from the index (where it works well) the address will be "http://127.0.0.1:8000/media/images/No-Image-Placeholder.png", meanwhile, from the listing (where it doesn't work) it'll be "http://127.0.0.1:8000/listing/media/images/No-Image-Placeholder.png".

So for some reason it added "/listing/" to the image address. How do I stop it from doing that?

Here is the html: From the index page

 <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>

From the Listing page:

{% 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 %}

The code from 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() })

CodePudding user response：

The issue is that your Listing app is appending it's location to this URL. You should be using the static template tag for serving static files such as images.

So make the following change to your template files for serving static content:

{% load static %} <!-- Put this at the top of your template -->

<img src="{% static 'images/No-Image-Placeholder.png' %}" />