How to serve media files with Django in local environment?

Question

I have a problem when trying to display in a template a picture from my media file (for example a profil picture from an user). I have already looked at many topics, and everytime the answer is simply adding the line urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) in the urls.py file. But I already have it and it still doesn't work. Here are the relevant part of my files :

urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('actualites.urls')),
    path('inscription/', include('inscription.urls')),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

settings.py

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

MEDIA_URL = '/media/'

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

views.py

def home(request):
    return render(request, 'actualites/home.html', {'last_meals': Plat.objects.all()})

models.py

class Plat(models.Model):
    titre = models.CharField(max_length = 100)
    date = models.DateField(default=timezone.now, verbose_name="Date de préparation")
    photo = models.ImageField(upload_to = "photos_plat/", blank = True)

    class Meta:
        verbose_name = "Plat"
        ordering = ['date']

    def __str__(self):
        return self.titre

You can see that the pictures are recorded in the photos_plat directory, which is a subdirectory of the media directory.

the template :

{% extends "base.html" %}
{% block content %}
    <h2>Bienvenue !</h2>
    <p>
       Voici la liste des plats disponibles :
    </p>

    {% for meal in last_meals %}
      <div class="meal">
        <h3>{{ meal.title }}</h3>
        <img src="{{ meal.photo.url }}" height=512 width=512/>
        <p>{{ meal.description|truncatewords_html:10 }}</p>
        <p><a href="{% url 'display' meal.id %}">Afficher le plat</a></p>
      </div>
    {% empty %}
      <p>Aucun plat disponible.</p>
    {% endfor %}
{% endblock %}

When I go the home page, I get the following error : ValueError at / The 'photo' attribute has no file associated with it. I have tried moving the pictures from the "photos_plat" directory directly to the media directory but that changes nothing. I don't know what I did wrong, can someone help me please ?

Thanks in advance !

do you actually have the image file inside the folder photos_plat? did you check by giving a default image ? — hithyshi, Dec 27 '19 at 14:25
Yes that was the problem ! I had so many images in the directory that I didn't notice the images were not uploading correctly anymore. I simply add ```enctype="multipart/form-data"``` in the form template and everything works perfectly. Thanks for pointing this out ! Have a nice day ! — Julien Mertz, Dec 27 '19 at 15:00

How to serve media files with Django in local environment?

0 Answers0