Created website using Django, but the images are not showing when deployed to heroku but shows in localhost

Question

The images are coming from the table in where the admin have uploaded the images:

These is my settings to store static files and media:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'portfolio/static/')

 ]

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'static')

MEDIA_ROOT = os.path.join(BASE_DIR,'media')
MEDIA_URL = '/media/'
STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'

The models I've created:

from django.db import models

# Create your models here.
class ProfileImage(models.Model):
    image = models.ImageField(upload_to='images/')

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

class Project(models.Model):
    image = models.ImageField(upload_to='images/')
    summary = models.TextField()
    title = models.CharField(max_length=30)
    link = models.URLField(max_length=200, null=True, blank=True)

    def __str__(self):
        return(self.title)

class Social(models.Model):
    image = models.ImageField(upload_to='images/')
    title = models.CharField(max_length=30)
    link = models.URLField(max_length=200, null=True, blank=True)

    def __str__(self):
        return(self.title)

class Skills(models.Model):
    title = models.CharField(max_length=20)

    def __str__(self):
        return(self.title)

In templates I have:

 <img src="{{profile_pic.image.url}}" height="600px" width="500x" class="img-fluid img-thumbnail"
            alt="Responsive image">
          <br>

In views I have:

from django.shortcuts import render
from .models import Job, Skills, Project, Social, ProfileImage

# Create your views here.
def home(request):
    jobs = Job.objects.all()
    skills = Skills.objects.all()
    projects = Project.objects.all()
    socials = Social.objects.all()
    profile_pic = ProfileImage.objects.all().first()
    context = {'jobs':jobs, 'skills':skills, 'projects':projects, 'socials':socials, 'profile_pic':profile_pic}
    return render(request, 'jobs/home.html', context)

When I deploy to heroku it shows:

Answer 1

how are you serving the static files? There's Whitenoise you can use that or other services like google cloud or aws to serve the static files on production.

Here's what Heroku had on their dev center as to how to serve static files in production. Serve static files on heroku

Answer 2

settings.py some changes need to be made

import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Build paths inside the project like this: BASE_DIR / 'subdir'.

MIDDLEWARE ++

# whitenoise middleware to serve static files in production mode
'whitenoise.middleware.WhiteNoiseMiddleware',

example photo

# Static files (CSS, JavaScript, Images)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'

# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

# Simplified static file serving.
# https://warehouse.python.org/project/whitenoise/
STATICFILES_STORAGE = 
'whitenoise.storage.CompressedManifestStaticFilesStorage'

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

urls.py

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

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

of course don’t forget to set it up

pip install whitenoise