I’m creating a gaming blog and I’m trying to add a background image for the homepage, but Django is having an issue accessing my static files.
Rather than loading the image, it displays an icon of a sheet of paper along with my placeholder text. I also cannot access the file directly in Visual Studio via the URL as it gives me a 404 error.
Here is my settings.py:
from pathlib import Path
import os
BASE_DIR = Path(__file__).resolve().parent.parent
SECRET_KEY = 'django-insecure-t_6omw0vumbdr0c(pt%%-%2x!%b-r8#-=yc7!(luzn6f)nw-mn'
DEBUG = True
ALLOWED_HOSTS = []
INSTALLED_APPS = [
"blog.apps.BlogConfig",
'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 = 'personal_blog.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
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 = 'personal_blog.wsgi.application'
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
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_TZ = True
STATIC_URL = '/static/'
STATIC_ROOT = 'C:\\Python312\\TheGamesLounge\\static'
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
Here is my base.html:
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Gaming Lounge</title>
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
</head>
<body>
<h1>The Gaming Lounge</h1>
<img src="{% static 'images/game_controller.jpg' %}" alt="A picture of a game controller">
<a href="{% url "blog_index" %}">Home</a>
<a href="{% static 'test.txt' %}">Test File</a>
<hr>
{% block page_title %}{% endblock page_title %}
{% block page_content %}{% endblock page_content %}
</body>
</html>
The image file I’m trying to access is “game_controller.jpg” in static/images (I originally had it in /static with no images subfolder, but thought creating the subfolder would remedy the issue. No dice. I also created a test.txt which doesn’t load either.)
I have also double-checked permissions of the static directory and also tried the collectstatic command.