Django Images: Static vs Media

#python #django #webdev #image

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

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

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>

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:

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/')

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)

Lastly, in settings.py, insert:

import os

MEDIA_ROOT =  os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

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)

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})

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>

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