How to Display an Image in Django
In this article, we show how to display an image in Django.
An image is really a static file.
In Django, all static files go into the static directory. This includes images, CSS files, javascript files, etc.
So you would have a static directory and inside of this static directory to separate and organize different files, best practice is to create an images directory, a css directory, javascript directory, etc.
So in this program, we follow the convention of creating a static directory in the app we're working with and then in the static directory, we create an images directory. We then put all images in this images directory.
Now regarding the page where we actually display the image.
To display any static files within an app, at the top of the page, you must put the following line.
What this line does is it allows you to access files within the static directory.
Displaying an image in Django is different than the typical HTML representation of an image.
In Django, the typical image is displayed through the following code.
So, let's now dissect what is going on in this code.
So just like in HTML, you will have your style attribute, which is able to specify the height and width of an image, if needed. If you want to keep your image as is in its original form, you would need leave out the style attribute. And just like in HTML, you will have your alt attribute, which is where you write the description of the image, so that the description can be shown if the image doesn't load and for search engines to be able to properly index and classify the image.
The last part now is the part that is very different from the standard way of displaying an image tag in HTML. In standard HTML, you would
have something like src="/images/Python.png">, where the Python image is stored in the images directory. However, with Django, this does not work. How you specify the
location of an image in Django is in between {% %}. In between these brackets, you specify static 'images\\Python.png', where Python is the image you want to display
which is inside of the images directory in the static directory you create for the current app you are in. We'll get more into this now.
Static Directory
In Django's official documentation, it recommends that you keep all static files, such as images, javascript files, CSS files, etc. in the static directory of the app you are using.
Say, let's say you create an App called Articles (where you keep the articles you write). Inside of this app, you need to create a static directory. Inside of this static directory, you should create a directory called images. Inside of this images directory, you put all the images for this Articles directory. You can then reference images using the path described above, which again is, src="{% static 'images\\Image_to_display.png' %}"
One thing to check in your project directory is the settings.py file.
Make sure that in this file, normally present at the very end of the file, is the following statement shown below.
Without this line of code, Django will not know that the directory static contains the static files. So make sure that this line is present.
And this is all that you need to display an image in Django.
Related Resources
How to Show All Tables of a MySQL Database in Python
How to Count the Number of Rows in a MySQL Table in Python