How to fix broken link from Django MEDIA_ROOT?

Question

I am attempting to show my image on website which is part of a postgresql DB which is connected to Django. I upload the file to the Django admin upload screen and have my model set up. However, I keep on getting a broken link for the picture.

My images folder is also in the base directory of my project.

I have tried to manipulate the root many times. I have also tried to use different images and types of images.

settings.py

import os

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

DEBUG = True

ALLOWED_HOSTS = []

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'jobs',
]

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 = 'djangoPortfolio.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 = 'djangoPortfolio.wsgi.application'

DATABASES = {
    'default': {
        Took this out. This is all set up correctly as other items from DB show. 
    }
}

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',
    },
]

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'djangoPortfolio/static/')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
print(os.path.exists(os.path.join(BASE_DIR, 'media/')))

urls.py

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url('', jobs.views.home, name='home'),
]
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

home.html

<img src = "{{ job.image.url }}" class="card-img-top" >

models.py

# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.db import models

class Job(models.Model):
    image = models.ImageField(upload_to='images')
    summary = models.CharField(max_length=250)

Folder Structure

    djangoPortfolio-project
        manage.py
        djangoPortfolio
            __pychache__
            static
            settings.py
            urls.py
            wsgi.py
            __init__.py 
        media 
            images
                {imagesUploadedFromAdmin}.png  
        jobs 
            __pychache__
            templates
                {.html}
            static
                {static images, css, js}
            migrations
            views.py
            models.py
            admin.py 
            tests.py
            apps.py
            __init__.py

Am getting this get request "GET /media/images/22195497_10214668197162885_8935384055220872583_n.jpg HTTP/1.1" 200" Which is the correct image I want to show.

Current Logs: Log on page refresh. Print statements to view variables where possible issues are.

Chrome Logs: Chrome Logs for the issue.

Broken Image: View of broken link on page.

Chrome Logs (Network): Network

Chrome Logs (Network after fixed): Chrome Logs with correct working MIME type

Answer 1

Check the link pointed to by the broken image in the browser. If it is the correct path to the image then check permissions of the folder it is stored in. If it is not correct, try change MEDIA_ROOT path to a different directory only for media files rather than BASE_DIR which exposes all your files to end-users. Check if mime-type of the file in the browser is correct for image (should be image/jpg etc and not text/plain or something different from image mime-types).

Answer 2

It seems you have tried everything. As a last try I would do the following changes.

In settings.py

STATIC_URL = '/static/' 
STATIC_ROOT = os.path.join(BASE_DIR, 'djangoPortfolio/static/') 
MEDIA_URL = '/media/images' 
MEDIA_ROOT = os.path.join(BASE_DIR,'djangoPortfolio', 'media', 'images')

In views.py, I will do changes such that only image name gets passed to the template and not the full path. simple split on "/" and taking the last index will give the filename. Suppose that file is called 'MyImage.png' then I would save it as MyImageHandle and I would add it to the context dictionary (the key and value named as 'MyImageHandle':MyImageHandle).

Then in the template, I will change it as the following.

<img src = "{% get_media_prefix %}{{ MyImageHandle }}" class="card-img-top" >

Not sure if this will bring out for you the solution, but something to try. Whenever you find a solution , please let us know. It will be very interesting to know the reason. One final question, are your static files being served (the CSS and js files) ? Last suggestion, try to open the link in a different browser.

At this moment all I can do is wish you all the best. You have tried "almost" everything.