June 12, 2020, 7:32 p.m.

Fixing - image not showing in django template - media and static configuration in Django

If you are creating your first project using Django or if you are using static content first time then you may definitely face the image displaying issue. To pass the static content (images in our case) to Django template we have to make proper settings in urls.py and settings.py (or maybe some other) files.
Today I am going to teach you how you can fix all the issues which pop-ups during rendering the images or static files. I will keep this tutorial step by step to make clear understating.

Step 1

First of all we have to create a static folder in our project directory.
Note : Always remember that the folder name you choose will remain case sensitive for URLs.
I am making the static folder named "static" in the project directory as shown below :

#In urls.py
ProjectName
   AppName
   media
   static
   templates
   db.sqlite3
   manage.py

An extra example for the directory location is shown in the following figure. Here my project name is mymails and i also created an app named MAILS. Thus, the templates, media & static folders located as per the following image :

Step 2

Now set the media saving and serving url & roots in settings.py file. For this purpose we have to add MEDIA_URL, MEDIA_ROOT, STATIC_DIR, STATIC_URL and STATICFILES_DIRS . These configurations are shown below :

#In settings.py
STATIC_DIR=os.path.join(BASE_DIR,'static')
MEDIA_ROOT=os.path.join(BASE_DIR,'media')
MEDIA_URL='/media/'
STATIC_URL = '/static/'
STATICFILES_DIRS=[
STATIC_DIR,
]

Also, you may have to set STATIC_ROOT. As I remember, for my case STATIC_ROOT was required when I was setting up my project on hosting server but not when I am running the website on my localhost. The above configuration is for localhost.
If the above configuration doesn't work for you then you may have to add STATIC_ROOT in settings.py file.

STATIC_ROOT is the nothing but the directory location of the static folder. In that case, you should try the following configuration.
Again remember that the values of URLs and ROOTs are case sensitive.

Step 3

Now we have to make some changes in our urls.py file. Just add the following code i.e we have to add the URLs and ROOTs in urlpatterns list which will be created automatically by configuration of the previous step.

#In urls.py
from django.conf import settings
from django.conf.urls.static import static

urlpatterns =static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)+[
path('admin/', admin.site.urls),
#your URLs
]

Step 4

Everything is all set now. Now I will tell you how you can set the urls in templates. For this we have to import/Load staticfiles first.

#In template
{% load static %} #for new django versions

{% load staticfiles %} #for old django versions

<img src="{{ Object.ImageField.url }}" />

Don't forget to use .url in template variable.

Tips

1) If you want to use images in you template from static folder then you can try something like this.

#In template
{% load static %} #for new django versions

{% load staticfiles %} #for old django versions

<img src="../static/images/MyImage.png">

Here double dot i.e ".." refers to the working or base directory.
2) If you want to create download link of the served file or image then you can do it very easily. Just use "download" in anchor tag.

#In template
{% load static %} #for new django versions

{% load staticfiles %} #for old django versions

<a href="{{Object.ImageField.url}}" download> Download</a>

3) If you are facing any issue then you should see the image path which your app is passing to the template. To see the rendered path or URL of the file:

Press F12 key and inspect the HTML code to see the image URL which is currently rendered. check whether the path or URL is correct or not.

Some recent posts

How to deploy a django website on pythonanywhere | django Web app deploying...

Complete process of changing database from SQLite to MySQL - How to migrat...

" How to download a file in django | Making a large file downloadable from ...

How to use proxy in python requests | http & https proxies - Scraping...

Top Django Querysets, How to filter records | Fetching data from database e...

How to change base url or domain in sitemap - Django ...

How to Make a Website - Everything you should know about web development...

What is Javascript - Features and usages ...

Top 5 Interview Questions : Tips for HR round ...

How to get job in IT : Perfect resume guide for IT job ...

View all...

Fixing - image not showing in django template - media and static configuration in Django

Some recent posts

Popular Posts