Django - Static images do not load, throw 404 error in console - django

Question

I've been trying to solve this error for a very long time. I have a lot of static images that I am trying to open through my website. However, none of the static images will load, and when I look in the console, I see the error Failed to load resource: the server responded with a status of 404 (Not Found)
Does anyone know why this is happening? I have ran collectstatic multiple times, restarted the server, done everything.
urls.py
from django.contrib import admin
from django.urls import path
import posts.views
import sitepages.views
import hackathons.views
import projects.views
import skills.views
from django.conf.urls.static import static
from django.conf import settings
from django.conf.urls import include
urlpatterns = [
path('admin/', admin.site.urls),
#path('blog/', posts.views.blog, name = "blog"),
#path('posts/<int:post_id>/', posts.views.post_details, name="post_details"),
path('about/', sitepages.views.about,name="about"),
path('awards/',sitepages.views.awards,name="awards"),
path('skills/',skills.views.skills,name="skills"),
path('skills/<int:skill_id>/', skills.views.skill_details,name="skill_details"),
path('projects/',projects.views.project,name="projects"),
path('hackathons/',hackathons.views.hackathons,name="hackathons"),
path('',sitepages.views.home,name="home"),
#path('hobbies/',sitepages.views.hobbies,name="hobbies"),
path('internships/',sitepages.views.internships,name="internships"),
path('project_details/<int:project_id>/', projects.views.project_details,name="project_details"),
path('hackathon_details/<int:hackathon_id>/', hackathons.views.hackathon_details, name="hackathon_details")
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
Static section of settings.py
"""
Django settings for pranavblog project.
Generated by 'django-admin startproject' using Django 2.0.7.
For more information on this file, see
https://docs.djangoproject.com/en/2.0/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.0/ref/settings/
"""
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
SETTINGS_PATH = os.path.dirname(os.path.dirname(__file__))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.0/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
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.sites',
'posts',
'sitepages',
'hackathons',
'projects',
'pagedown',
'skills.apps.SkillsConfig',
'django.forms'
]
FORM_RENDERER = 'django.forms.renderers.TemplatesSetting'
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 = 'pranavblog.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(os.path.dirname(BASE_DIR), 'templates'),],
'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 = 'pranavblog.wsgi.application'
# Database
# https://docs.djangoproject.com/en/2.0/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/2.0/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/2.0/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
SITE_ID = 1
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.0/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT = 'staticfiles'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
Above is the whole settings.py, as requested. Allowed hosts and secret key were left out on purpose.
Please let me know if you need more information.
Edit:
Here is my project folder structure. The media folder contains a lot of images.

Answer 1

STATIC_URL = '/static/'
STATIC_ROOT = 'staticfiles'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Answer 2

You've added a path to serve MediaFiles, not Static Files. You might want to add static(settings. STATIC_URL,document_root=settings. STATIC_ROOT) to your urls.py
Do not use DEBUG=True in production, that is a big "No".
Have you considered using a proxy like NGINX ? You'll be able to cache your static files improving perfomance. Django is not designed to serve Static files.

Answer 3

I believe you're missing this:
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]
Or maybe not, but that's the only thing I can see you don't have in your settings.