1

I'm developing a website and sometimes I have a strange problem : the URL of the page is concatened with the URL of the images on this page, which means I cannot access to these images. It's a bit hard to explain so here is an example :

I have a view called "mes_plats" that displays some informations about meals cooked by a cooker. The informations are displayed with a background located at static/media/img_background.jpg and everything works correctly. I have another view called "supprimer_plat" (url : supprimer-plat) whose purpose is to delete the informations about a particular meal. This view render the same html template as the other one but this time the template try to access the following url for the background : supprimer-plat/static/media/img_background.jpg. Obviously the background isn't displayed. So my question is, why does the url of the page concatened to the URL of the image in one case and not in the other ? And how can I solve it ? Thanks in advance !

views.py

def mes_plats(request):
    return render(request, 'actualites/mes_plats.html', {'my_meals': Plat.objects.filter(chef=request.user.useradvanced.chef, date_prep__gte = date.today())})

def supprimer_plat(request, id):
    plat = get_object_or_404(Plat, id=id)
    plat.delete()
    return render(request, 'actualites/mes_plats.html', {'my_meals': Plat.objects.filter(chef=request.user.useradvanced.chef, date_prep__gte = date.today())})

urls.py

urlpatterns = [
    path('mes-plats', views.mes_plats, name = 'mes-plats'),
    path('supprimer-plat/<int:id>', views.supprimer_plat, name = 'supprimer-plat'),
]

mes_plats.html

<!doctype html>
{% extends "base.html" %}
{% load static %}
{% block content %}
   <body class="view" style="background-image: url('static/media/img_background.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
      SOME CODE
{% endblock %}
Julien Mertz
  • 465
  • 2
  • 8
  • 22
  • 1
    That is not strange: you do not start the url with a slash, so it is a *relative* path. – Willem Van Onsem Dec 28 '19 at 12:20
  • Yes that solves the problem thank you ! Can you explain me what was the matter when we don't start the url with a slash ? What is a relative path ? – Julien Mertz Dec 28 '19 at 12:22
  • I mean I guess a relative path is a path that is added after an URL, but why was it working for the first view ? Why doesn't it try to access ```mes-plats/static/media/img_background.jpg``` ? – Julien Mertz Dec 28 '19 at 12:25

1 Answers1

1

This is expected behavior. Your url is:

static/media/img_background.jpg

uses a relative path. So if the site is located at foo.com/bar/qux, then it will browse for foo.com/bar/static/media/img_background.jpg.

You thus can avoid that by prepending the path with a slash, like:

/static/media/img_background.jpg

But it might be better here to make use of Django's staticfiles support [Django-doc]. After configuring this, you can use the {% static … %} template tag [Django-doc] to "calculate" the urls.

Note that in deployment mode, you will need to configure your server to serve the static files itself. But you can still use the {% static … %} to calculate the URLs, and thus make it less likely to make mistakes.

Willem Van Onsem
  • 443,496
  • 30
  • 428
  • 555
  • Thank you ! I usually always use static but in this case, when I write ```background-image: {% static '/media/img_background.jpg' %};``` it is not working and I don't understand why. I used the inspector and there isn't an error, it's like it doesn't even try to access the image – Julien Mertz Dec 28 '19 at 12:30
  • 1
    @JulienMertz: you need to write `background-image: url({% static ... %})`. – Willem Van Onsem Dec 28 '19 at 12:31