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 settings.py:

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 https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/


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

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

ALLOWED_HOSTS = []




# Application definition

INSTALLED_APPS = [
    'ensemble.apps.EnsembleConfig',
    'home.apps.HomeConfig',
    'schedule.apps.ScheduleConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]


MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'lifeforce.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'lifeforce.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases

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


# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        '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
# https://docs.djangoproject.com/en/3.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

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 urls.py:

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('admin/', admin.site.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?

-Tim

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