How to Add Static Images in Django (with Example)

In this tutorial, you’ll learn how to store, serve, and display static images (like .jpg files) in a Django project using proper configuration, URLs, and templates.

🗂️ Step 1: Place Your Image in the Static Folder

Inside your Django app directory (jobs), create a folder named static, and place your image inside:

📁 jobs/static/mani.jpg

⚙️ Step 2: Configure settings.py

Add or confirm the following lines to define your static root directory and URL:

import os

STATIC_URL = '/static/'

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

This tells Django where to collect all static files and how to access them via URL.

🌐 Step 3: Update urls.py to Serve Static Files

In your project-level urls.py (e.g., portfolio/urls.py), import Django’s static helper and update urlpatterns:

from django.conf import settings

from django.conf.urls.static import static

from django.contrib import admin

from django.urls import path

import jobs.views

urlpatterns = [

path('admin/', admin.site.urls),

path('', jobs.views.homepage, name='home'),

] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

This enables Django to serve files from the /static/ path during development.

📦 Step 4: Run collectstatic

Use Django’s collectstatic command to gather all static files into a central location:

python manage.py collectstatic

You’ll see an output like:

Copied 62 static files to '.../portfolio/static'.

This process also collects admin panel assets and any other static files defined across your project and apps.

✅ A new top-level static/ folder will appear in your project, containing:

admin CSS, fonts, images, JS
your image: mani.jpg

🖼️ Step 5: Display Static Image in home.html

Update your home.html template:

First, load the static tag at the top:

{% load static %}

Wherever you'd like to show the image (e.g., after your button), insert this <img> tag:

📌 If your image is under a subfolder like jobs/static/images/mani.jpg, update the path accordingly:

✅ Final Result

When you visit http://localhost:8000, Django will correctly render the image from your static folder!

🧠 Summary

✅ Place .jpg files inside your app's static folder
✅ Configure STATIC_URL and STATIC_ROOT in settings.py
✅ Update urls.py to serve static files
✅ Run python manage.py collectstatic
✅ Use {% static 'filename.jpg' %} in your HTML

This approach is clean, Django-recommended, and works reliably in both development and production.

Search This Blog