Trouble Displaying Images from Database

Hi Everyone!
Bit of a newb here. Took a course and I’m now building an app to practice. Part of my app is a contacts page and I’m trying to allow the user to upload a photo for each contact. But I can’t seem to get the photos to display once they’re uploaded.

This is what I’m seeing on the page where the image should be:

Here is the relevant model:

class Person(models.Model):
    first_name = models.CharField(max_length=200,verbose_name="First Name")
    last_name = models.CharField(max_length=200,verbose_name="Last Name")
    email = models.EmailField(max_length = 254, null =True, blank = True)
    cell_phone = models.CharField(max_length = 12, null =True, blank = True,verbose_name="Cell Phone #")
    home_phone = models.CharField(max_length = 12, null =True, blank = True,verbose_name="Home Phone #")
    assigned_department = models.ForeignKey(Department, on_delete=models.CASCADE, null =True, blank = True,verbose_name="Primary Department")
    headshot = models.FileField( null =True)

    #asigned_roles for the roles assigned

    def __str__(self):
        return self.last_name +", " + self.first_name

here is the html where I try to show the image:

                          {% if person.headshot %}  

                            <img alt="Avatar" class="table-avatar" src="{{person.headshot.url}}">

                          {% else %}  

                            <img alt="Avatar" class="table-avatar" src="{% static 'admin/dist/img/q.png' %}">

                          {% endif %}

If I inspect the source of where the image should be I get something like :<img alt="Avatar" class="table-avatar" src="546931.jpg">

Here is my

rom pathlib import Path

import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

# Quick-start development settings - unsuitable for production
# See

# SECURITY WARNING: keep the secret key used in production secret!

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True


# Application definition



ROOT_URLCONF = 'lifeforce.urls'

        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [

WSGI_APPLICATION = 'lifeforce.wsgi.application'

# Database

    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',

# Password validation

        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',

# Internationalization



USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)

STATIC_URL = '/static/'

MEDIA_ROOT = os.path.join(BASE_DIR,'media')#this line is added and it serves as the root address of 
#uploaded file
MEDIA_URL = '/media/'#this line is added and it creates a directory named media in your appfolder
#where the uploaded images will be stored


and here is my

from django.contrib import admin
from django.urls import include, path
from django.views.generic import TemplateView

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

urlpatterns = [
    path('ensemble/', include('ensemble.urls')),
    path('accounts/', include('django.contrib.auth.urls')),

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Any idea what I’m doing wrong here? I’m sure it’s something pretty obvious.

I suggest you review the Using files in models docs, particularly the example - I’d try to run the commands in that example, substituting your model and fields. This should give you a good idea as to what might be wrong.

You might also want to review

Thanks Ken!
Magically started working on my end, not 100% sure why. I will definitely read through this documentation though!

Hi Wadebob,

Welcome to the community! To add to Ken’s list of things to check is to see if the file 546931.jpg exists within your MEDIA_ROOT directory on your filesystem. Is it possible the file was deleted outside of the application?


Hey Tim!
I think something like that must have happpend because when I re uploaded the immage it displayed correctly.