📌 Introduction
In Django, images are also static files.
We store them inside the static/ folder and load them using:
👉 {% static %}
🎯 Program Statement
👉 Display an image from the static folder using {% static %}.
🧠 Concept
👉 Static folder can store:
- CSS
- JS
- Images
⚙️ Step 1: Static Folder Structure
📁 Project Structure:
myproject/
static/
images/
pic.jpg
📁 File: pic.jpg
🔹 Path:
myproject/static/images/pic.jpg
👉 You can use any image (e.g., logo, photo, etc.)
⚙️ Step 2: Ensure Static Settings
📁 File: settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
⚙️ Step 3: Create Template
📁 File: image.html
🔹 Path:
myproject/templates/image.html
🔹 Code:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Image Display</title>
</head>
<body>
<h1>Displaying Image</h1>
<img src="{% static 'images/pic.jpg' %}" width="300" height="200">
</body>
</html>
⚙️ Step 4: Create View
📁 File: views.py
🔹 Path:
myproject/myapp/views.py
🔹 Code:
from django.shortcuts import render
def show_image(request):
return render(request, 'image.html')
⚙️ Step 5: URL Mapping
📁 File: urls.py
🔹 Path:
myproject/myproject/urls.py
🔹 Code:
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
path('admin/', admin.site.urls),
path('image/', views.show_image),
]
⚙️ Step 6: Run Server
python manage.py runserver
🌐 Step 7: Output
👉 http://127.0.0.1:8000/image/
✅ Output:
You will see the image displayed on the page.
🧠 How It Works
- Image stored in
static/images/ {% load static %}enables static usage{% static 'images/pic.jpg' %}generates path<img>tag displays image
🔥 Key Syntax
Load Static
{% load static %}
Display Image
<img src="{% static 'images/pic.jpg' %}">
⚠️ Common Errors
❌ Forgot {% load static %}
👉 Image will not load
❌ Wrong path
❌ Wrong:
{% static 'pic.jpg' %}
✅ Correct:
{% static 'images/pic.jpg' %}
❌ Image not in static folder
👉 Must be inside:
static/images/
❌ Browser cache issue
👉 Do hard refresh:
Ctrl + Shift + R
🧪 Practice Questions
- Display multiple images
- Add image in header
- Create gallery page
- Add CSS styling to image
🎤 Viva Questions & Answers
1. What is static file in Django?
Static files include CSS, JS, and images used in UI.
2. Where are images stored?
Inside static/ folder, usually in images/ subfolder.
3. How to display image in Django template?
Using <img> tag with {% static %}.
4. Why use {% load static %}?
To enable static file handling in templates.
5. What happens if image path is wrong?
Image will not be displayed.
6. What is <img> tag?
HTML tag used to display images.
7. Can we style images using CSS?
Yes, CSS can control size, border, alignment.
8. What is relative path in static?
Path relative to static folder.
9. Can we use multiple images?
Yes, multiple images can be loaded.
10. Why is this important?
Images are essential for UI design and user experience.
👉 Next Post: Add JavaScript via Static Folder
👉 Back to List: Django Programs (60 Questions with Solutions)
Further Reading
Introduction to Django Framework and its Features
Examples of Array Functions in PHP
Registration Form Using PDO in PHP
Inserting Information from Multiple CheckBox Selection in a Database Table in PHP
- Angular
- ASP.NET
- C
- C#
- C++
- CSS
- Dot Net Framework
- HTML
- IoT
- Java
- JavaScript
- Kotlin
- PHP
- Power Bi
- Python
- Scratch 3.0
- TypeScript
- VB.NET