How to use static files in template in django

DjangoHow-ToBeginner · 4 min read

How to Use Static Files in Django Templates: Simple Guide

To use static files in Django templates, first ensure django.contrib.staticfiles is in INSTALLED_APPS and STATIC_URL is set in settings.py. Then, load static files in your template with {% load static %} and reference files using {% static 'path/to/file' %} inside HTML tags.

📐

Syntax

Use the {% load static %} tag at the top of your Django template to enable static file handling. Then, use {% static 'relative/path/to/file' %} to get the URL for your static file.

This URL can be used inside HTML tags like <img>, <link>, or <script>.

django

{% load static %}
<img src="{% static 'images/logo.png' %}" alt="Logo">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<script src="{% static 'js/app.js' %}"></script>

💻

Example

This example shows how to set up static files in settings.py, create a static folder, and use static files in a template.

django

# settings.py
INSTALLED_APPS = [
    'django.contrib.staticfiles',
    # other apps
]

STATIC_URL = '/static/'

# Project structure example:
# myproject/
# ├── myapp/
# │   ├── static/
# │   │   └── myapp/
# │   │       ├── css/
# │   │       │   └── styles.css
# │   │       ├── images/
# │   │       │   └── logo.png
# │   │       └── js/
# │   │           └── app.js
# │   └── templates/
# │       └── myapp/
# │           └── index.html

# templates/myapp/index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static Files Example</title>
    <link rel="stylesheet" href="{% static 'myapp/css/styles.css' %}">
</head>
<body>
    <h1>Welcome to Django Static Files</h1>
    <img src="{% static 'myapp/images/logo.png' %}" alt="Logo">
    <script src="{% static 'myapp/js/app.js' %}"></script>
</body>
</html>

Output

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Static Files Example</title> <link rel="stylesheet" href="/static/myapp/css/styles.css"> </head> <body> <h1>Welcome to Django Static Files</h1> <img src="/static/myapp/images/logo.png" alt="Logo"> <script src="/static/myapp/js/app.js"></script> </body> </html>

⚠️

Common Pitfalls

Forgetting to add django.contrib.staticfiles in INSTALLED_APPS causes static tags to fail.
Not using {% load static %} at the top of the template will make {% static %} tag unavailable.
Incorrect file paths inside {% static %} lead to 404 errors; paths are relative to the static folder.
In development, ensure DEBUG = True so Django serves static files automatically.
In production, static files must be collected with python manage.py collectstatic and served by the web server.

django

{# Wrong: missing load static #}
<img src="{% static 'images/logo.png' %}" alt="Logo">

{# Right: include load static #}
{% load static %}
<img src="{% static 'images/logo.png' %}" alt="Logo">

📊

Quick Reference

Step	Description	Example
1	Add staticfiles app	Add 'django.contrib.staticfiles' to INSTALLED_APPS
2	Set STATIC_URL	STATIC_URL = '/static/' in settings.py
3	Create static folder	Place files in app/static/app_name/ folder
4	Load static in template	{% load static %} at top of template
5	Use static tag

✅

Key Takeaways

Always add {% load static %} at the top of your Django templates before using static files.

Use {% static 'path/to/file' %} to get the correct URL for static files inside templates.

Ensure 'django.contrib.staticfiles' is in INSTALLED_APPS and STATIC_URL is set in settings.py.

In development, Django serves static files automatically if DEBUG=True; in production, run collectstatic.

Keep static files organized inside app/static/app_name/ folders for easy referencing.