DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for Django Images: Static vs Media
Manasa SK
Manasa SK

Posted on

Django Images: Static vs Media

There are mainly 2 ways of displaying images on your website when using Django. Which method should you use then? It depends on the requirements and I will be providing a detailed understanding of how and when to use each method.

The 2 ways of displaying images on a web page are:

  • Static images

  • Upload through media


Static Images

If an image is to be displayed from a definite set of images, static method should be used.

Your folder structure inside the project folder must look something like this.

ยช   db.sqlite3
ยช   manage.py
ยช   tree.txt
ยช   
+---demo
ยช   ยช   asgi.py
ยช   ยช   settings.py
ยช   ยช   urls.py
ยช   ยช   wsgi.py
ยช   ยช   __init__.py
ยช   ยช   
ยช   +---__pycache__
ยช           settings.cpython-310.pyc
ยช           urls.cpython-310.pyc
ยช           wsgi.cpython-310.pyc
ยช           __init__.cpython-310.pyc
ยช           
+---env
ยช
+---myapp
    ยช   admin.py
    ยช   apps.py
    ยช   models.py
    ยช   tests.py
    ยช   views.py
    ยช   __init__.py
    ยช   
    +---migrations
            __init__.py
    ยช
    +---templates
    ยช       index.html
Enter fullscreen mode Exit fullscreen mode

Create a folder in myapp and name it 'static'.

myapp folder structure should look like this.

+---myapp
    ยช   admin.py
    ยช   apps.py
    ยช   models.py
    ยช   tests.py
    ยช   views.py
    ยช   __init__.py
    ยช   
    +---migrations
    ยช       __init__.py
    ยช
    +---static
    ยช
    +---templates
    ยช       index.html
Enter fullscreen mode Exit fullscreen mode

Now, in static folder, you can create a folder 'images' and upload your images.

In your specified html file (index.html in this case), add the following at the top of the page:

{% load static %}

In the image tag of the file, add the path to the image by adding the following:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Static Image</title>
</head>
<body>
    <img src="{% static 'images/image.jpg' %}" alt="">
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Since static url is already defined in settings.py, the static tag refers to the static folder created.

You can display the image like this:

Static image displayed on web page


Upload Image through Media

When multiple images need to be stored in the database or object or user specific images need to be displayed, this method is used.

The images can be uploaded to the database through:

  • A seperate form on a web page that takes image files

  • Uploading images through admin panel

Here, I will be uploading the images through the admin panel.

Since this method requires Pillow (python module), run the command:
pip install Pillow

Create your model and create an image field.

from django.db import models

# Create your models here.
class MyModel(models.Model):
    id = models.AutoField(primary_key=True, auto_created=True)
    name = models.CharField(max_length=50)
    image = models.ImageField(upload_to='images/')
Enter fullscreen mode Exit fullscreen mode

This automatically creates a folder 'media' and a folder 'images' in it once the setup is completed. Migrate the changes.

In urls.py, mention the root to media:

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

urlpatterns = [
    path('', views.index, name='index'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Enter fullscreen mode Exit fullscreen mode

Lastly, in settings.py, insert:

import os

MEDIA_ROOT =  os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
Enter fullscreen mode Exit fullscreen mode

Now that the setup is completed, you can insert the data.

To access the admin panel, create a superuser by running the command:
python manage.py createsuperuser

Now register your model in the admin panel by adding the following to admin.py:

from .models import *

admin.site.register(MyModel)
Enter fullscreen mode Exit fullscreen mode

Now switch to the admin panel and add a few objects to the model. Next, edit your view to pass image query set to the web page.

# Create your views here.
def index(request):
    images = MyModel.objects.filter(name='manasa')
    return render(request, 'index.html', {'images': images})
Enter fullscreen mode Exit fullscreen mode

And edit your html page to display these images.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Media Image</title>
</head>
<body>
    {% for img in images %}
    <img src="{{img.image.url}}" alt="" width="200px" height="150px">
    {% endfor %}
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now that the procedure is completed, run the server. The web page should look like this:
Images displayed through media


Top comments (0)

๐ŸŒš Friends don't let friends browse without dark mode.

Sorry, it's true.