❮ Previous

Django Static & Media Files

  • Learn how Django manages static assets and user-uploaded media files.

  • What are Static Files?

    Static files are files that:

    • Do not change

    • Used for design & interactivity

    Examples:

    • CSS files

    • JavaScript files

    • Images (logo, icons)

    What are Media Files?

    Media files are:

    • Uploaded by users

    • Stored dynamically

    Examples:

    • Profile pictures

    • Uploaded documents

    • Product images

    Static Files in Django

    Default Static Files Structure

    Inside your app:

    myapp/

     ├── static/

     │    └── myapp/

     │         ├── css/

     │         │     └── style.css

     │         ├── js/

     │         │     └── script.js

     │         └── images/

     │               └── logo.png


    App name inside static folder avoids conflicts

    Static Files Configuration

Static Files Settings [ settings.py ]

Tells Django where static files are located. 

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / "static"
]

  • STATIC_URL → URL path
    STATICFILES_DIRS → Static file location

    Using Static Files in Templates

Loading Static Files [ base.html ]

Connects CSS, JS, images to templates. 

{% load static %}

<!DOCTYPE html>
<html>
<head>
    <title>Django Static</title>
    <link rel="stylesheet" href="{% static 'myapp/css/style.css' %}">
</head>
<body>

<img src="{% static 'myapp/images/logo.png' %}" alt="Logo">

<script src="{% static 'myapp/js/script.js' %}"></script>

</body>
</html>

  • {% load static %} must be at the top

    CSS File

CSS Styling [ style.css ]

Basic CSS file for styling. 

body {
    background-color: #f5f5f5;
}

h1 {
    color: darkblue;
}

  • JavaScript File

JavaScript File [ script.js ]

Adds interactivity. 

alert("Static files loaded successfully!");

  • Media Files (User Uploads)

    Why Media Files?

    • Used when users upload files

    • Stored separately from static files

    Examples:

    • User profile images

    • Product photos

    Media Configuration

Media Settings [ settings.py ]

Configures upload folder. 

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

  • Serve Media Files (Development)

Media URL Configuration [ urls.py ]

Enables media access in development. 

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

urlpatterns = [
    # your urls
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

  • Media Upload Example (Image Upload)

    Model with Image Field

Image Upload Model [ models.py ]

Stores image uploaded by user. 

from django.db import models

class Profile(models.Model):
    name = models.CharField(max_length=100)
    photo = models.ImageField(upload_to='profiles/')

  • Requires Pillow library

    pip install pillow

    Display Uploaded Image

Display Media File

Shows uploaded image in template. 

<img src="{{ profile.photo.url }}" alt="Profile Photo">

  • Static vs Media (Important Table)

    Feature

    Static Files

    Media Files

    Who uploads

    Developer

    User

    Change frequency

    Rare

    Frequent

    Examples

    CSS, JS

    Images, Docs

    Folder

    static/

    media/

    Real-World Use Case

    • Static → website design

    • Media → user uploads

    • Both used together in every project

❮ Previous