Placeholder Image not Loading Correctly Using Django

Question

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() })

Sorry, I'm not following. What do you mean by sharing the view? You mean screencaps? — jnc6, Feb 14 '22 at 17:35

score 1 · Accepted Answer · answered Feb 14 '22 at 17:49

1

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' %}" />

answered Feb 14 '22 at 17:49

Lzak

373
1
8

Thanks a lot for the answer. I actually got it to work doing what you said. However, in order to do so, I had to move the image from the media/images folder to the static/images folder. It's not important, but do you know if there is a way to get it to work while keeping it in the media/images folder? – jnc6 Feb 14 '22 at 18:02
You defined the location of the static folder in your *settings.py*: `STATIC_URL = '/static/'`. If you're looking to keep your static media in /media, then just simply change that variable to `'/media/'` – Lzak Feb 14 '22 at 18:06
Awesome, thanks. I guess I have to learn more about the difference between STATIC_URL and MEDIA_URL. – jnc6 Feb 14 '22 at 18:15
There's a pretty good explanation about this [over here](https://stackoverflow.com/questions/24022558/differences-between-staticfiles-dir-static-root-and-media-root). – Lzak Feb 14 '22 at 18:20

Placeholder Image not Loading Correctly Using Django

1 Answers1