Django - Images won´t be displayed in template, but image url showes up. Urls.py Issue?

Question

Using Django 2.1.5 + Bootstrap 4.2 and some Icons from fontawesome

Hello , after a long search I decided to post, because most answer are related to older Django versions. I am relatively new to Django and I like to test all the Function/Class Views and Modelfields. Now I wanted to test how I can display images linked with my database in my template. But unfortunately, images want not display, all I see is image placeholder icon.

I created an app and 2 simple models, with musicians (with images) and cars. The upload via admin works and the blank url are accessible in the Template via {{ modelone.person_pic }}

PROBLEMS SOLVED - See down Below

aquaman / models.py

class Person(models.Model):
    first_name = models.CharField(max_length=30)
    last_name = models.CharField(max_length=30)
    person_pic = models.ImageField(upload_to='artist/', max_length=255, null=True, blank=True )

def __str__(self):
    return "{} - {}".format(self.first_name[:25], self.last_name[:25])

class Data_Sheet(models.Model):
    car = models.CharField(max_length=30)
    color = models.CharField(max_length=30)

    def __str__(self):
    return "{} - {}".format(self.car[:25], self.color[:25])

views.py

from django.shortcuts import get_object_or_404, render, redirect
from django.utils import timezone
from django.views.generic.list import ListView
from django.views.generic import TemplateView


from .models import Person, Data_Sheet

<…some other views…>

class ArtistView4(TemplateView):

template_name = 'aquaman/artistview4.html'


def get_context_data(self, **kwargs):
    context = super(ArtistView4, self).get_context_data(**kwargs)
    context['modelone'] = Person.objects.all()
    context['modeltwo'] = Data_Sheet.objects.all()
    return context

artistview4.html

{% extends 'base.html' %}

{% load static %}


{% block custom_css %}
<link rel="stylesheet" type="text/css" href="{% static 'css/clear_styles.css' %}">
{% endblock %}


{% block content %}


{% for visual in modelone %}

<div align="center">
<h4 class="">{{ visual.first_name }}</h4>
<h4 class="">{{ visual.last_name }}</h4>
<h4 class="">{{ visual.person_pic }}</h4> <!-- to check if url is displayed --> 
</div>

<img src="{{ visual.person_pic.url }}">

</div>
{% endfor %}

{% endblock %}

urls.py

from django.urls import path

from . import views
from .views import AquaListView, AquaListView2, AquaListView3, ArtistView4

app_name='aquaman'

urlpatterns = [
    path('home/', views.aqua_home, name='aqua_home'),
    path('aqua_listview/', AquaListView.as_view(), name='aqua_listview'),
    path('aqua_listview2/', AquaListView2.as_view(), name='aqua_listview2'),
    path('aqua_listview3/', AquaListView3.as_view(), name='aqua_listview3'),
    path('arstistview4/', ArtistView4.as_view(), name='artistview4'),
]

my approach

As far as I understand the documentation. I have to add this lines to the urls.py in the urlpattern, so that everything gets directed.

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

So my urls.py looks like this now

from django.urls import path

from django.conf import settings
from django.conf.urls.static import static

from . import views
from .views import AquaListView, AquaListView2, AquaListView3, ArtistView4

app_name='aquaman'

urlpatterns = [
    path('home/', views.aqua_home, name='aqua_home'),
    path('aqua_listview/', AquaListView.as_view(), name='aqua_listview'),
    path('aqua_listview2/', AquaListView2.as_view(), name='aqua_listview2'),
    path('aqua_listview3/', AquaListView3.as_view(), name='aqua_listview3'),
    path('arstistview4/', ArtistView4.as_view(), name='artistview4'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

This is what i added in my settings.py

TEMPLATES = [
    {
<…>
 'django.template.context_processors.media',
<…>
    },
]


STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    '/var/www/static/',
]

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

So far nothing changed. Django shows me the last name correctly in the template, but I only see image place holders and no images.

Django Server

Not Found: /media/artist/freddy_mercury.jpg
Not Found: /media/artist/kurt_cobain.jpg
Not Found: /media/artist/ella_fitzgerald.PNG
Not Found: /media/artist/amy_winehouse.PNG
[07/Feb/2019 18:42:49] "GET /media/artist/ella_fitzgerald.PNG HTTP/1.1" 404 2257

When i upload a image via admin from my desktop Django automatically saves the pictures in **MyProject/media/artist>** but at the same time django can not find these images?

If go directly to the images via http://127.0.0.1:8000/media/artist/kurt_cobain.jpg for example, django shows me this:

The current path, media/artist/kurt_cobain.jpg, didn't match any of these.

Even though Django puts the picture via upload in the BaseDir/media/artist folder.

Maybe I missed the "Serving files in development" aka if settings.DEBUG: https://docs.djangoproject.com/en/2.1/ref/views/

But when I add this also nothing happens.

I really like to thank everyone, who might have a hint

Problem Solved

Alright, I misunderstand something in the Docs maybe it´s not so obvious.

from django.conf import settings
from django.conf.urls.static import static

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

This has to be added in the "MainApp/urls.py" not in your "MyOtherApps/urls.py". I thought just because I only need Images in a specific app I have to add these lines in these specific App urls.py.

Rock On & Peace