How to display image from database in Django

In this article, you will learn how to display images from the MySQL database using Django. In this previous example, we have explained how to upload an image using Django. The uploaded image is stored into a static directory. In most of the applications, we may need the display image somewhere in the application. Django comes with pre-defined packages and methods that makes this task easier.

If you had not installed the Django package, please follow the Django documentation for initial setup.

These are the step by step process to display an image using Django

Suppose, we have the following MySQL table 'gallery' -

CREATE TABLE IF NOT EXISTS `gallery` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` char(200) NOT NULL,
  `img` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=12 DEFAULT CHARSET=utf8;

INSERT INTO `gallery` (`id`, `title`, `img`) VALUES
(9, 'Flowers', 'media/flowers.jpg'),
(10, 'Deer', 'media/deer.jpg'),
(11, 'Cat', 'media/cat.jpg');

models.py

A model is a definitive source of information about your data. Each model maps a single database table and each attribute represents a database field. The given model defines a gallery, which has image title and image source -

from django.db import models

class GetImage(models.Model):   
    title = models.CharField(max_length=100)
    img = models.ImageField(upload_to="media")
    class Meta:
        db_table = "gallery"

settings.py

First, configure the database. We need to tell Django we're going to use the MySQL database. Do this by editing your settings file and changing the DATABASES setting to add the name of the database with configurations.

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'demo',
        'USER': 'root',
        'PASSWORD': '',
        'HOST': 'localhost',
        'PORT': '3306'
    }
}

Also, add the following codes in your settings file. MEDIA_URL is the URL that will serve the media files and MEDIA_ROOT is the path to the root directory where the files are getting stored.

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

Create HTML Template file

Next, we have created a template directory under 'imageapp' app and where we have created an HTML template file 'show.html' that call on the browser for displaying images.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Django Display Images</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-striped">
    <thead>
      <tr>
		<th>Title</th>
		<th>Image</th>
      </tr>
    </thead>
    <tbody>
	{% for img in images %}  
      <tr>
        <td>{{img.title}}</td>
		<td><img src="/{{ BASIC_DIR }}/{{img.img}}" width="120"/></td>
      </tr>
	  {% endfor %} 
	</tbody>
</table>	
</div>
</body>
</html>

views.py

We have placed the following code in 'views.py'.

from django.shortcuts import render,redirect
from imageapp.models import GetImage 

# Create your views here.
def display_images(request): 
  
    # getting all the objects of hotel. 
    allimages = GetImage.objects.all()  
    return render(request, 'show.html',{'images' : allimages})

urls.py

At last, we have added path to route page to the particular link. Make sure you've got your MEDIA_URL and MEDIA_ROOT correct in your settings.py then you can append the following to your url conf -

from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
from imageapp import views

urlpatterns = [
    path('show', views.display_images),
]

if settings.DEBUG:
        urlpatterns += static(settings.MEDIA_URL,
                              document_root=settings.MEDIA_ROOT)

When, we migrate and run the application, we will get the result something like this -

How to upload image and add in Django model Imagefield
Python program to convert Celsius to Fahrenheit
Python send mail to multiple recipients using SMTP server
How to generate QR Code in Python using PyQRCode
Python programs to check Palindrome strings and numbers
CRUD operations in Python using MYSQL Connector
Fibonacci Series Program in Python
Python File Handler - Create, Read, Write, Access, Lock File
Python convert XML to JSON
Python convert xml to dict
Python convert dict to xml