How to use Media Files in Django Templates?

Hi Dev,

Here, I will show you how to use media files in django templates. you will learn django load media files in template. I explained simply step by step how to display media file in django template. This post will give you simple example of how to load media files in django template.

You will learn how to use media files in Django templates with Python support in this tutorial. Your web application frequently loads media files like images, videos, etc. because they enhance the user experience.

By default, Django provides stores files locally, using the MEDIA_ROOT and MEDIA_URL settings.

Here i explained simply step by step example of how to use media files in django templates.

Step 1: Create a Project

In this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:

django-admin startproject example

Step 2: Create a App

Now we'll create a single app called core to store a list of post names. We're keeping things intentionally basic. Stop the local server with Control+c and use the startapp command to create this new app.

python3 manage.py startapp core

Step 3: Update setting.py

Then update INSTALLED_APPS within our settings.py file to notify Django about the app.

....
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'core',
]

import os

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

MEDIA_URL = 'media/'

In the example/media/images directory, place the image files. Let's assume you added the 3 images inside images directory.

Step 4: Serving Media Files

In this section, we need a urls.py file within the core app however Django doesn't create one for us with the startapp command. Create core/urls.py with your text editor and paste below code.

from django.urls import path
from . import views

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)

Step 5: Retrieving Media Files

import os
from django.conf import settings
from django.shortcuts import render
from django.templatetags.static import static

# Create your views here.
def index(request):
    path = settings.MEDIA_ROOT
    img_list = os.listdir(path + '/images')
    context = {'images' : img_list}
    return render(request, "core/index.html", context)

Step 6: Loading Media Files in Template

Next, then with your text editor create new templates files: core/index.html file and the add:

{% if images %}
    {% for image in images %}
        <img src="{{ MEDIA_URL }}images/{{ image }}" alt="{{ image }}">
    {% endfor %}
{% else %}
    <p>No image available.</p>
{% endif %}

I hope it will help you....

Happy Coding!