Django images not showing up in template

Question

I've spent the whole day trying to find a solution for showing the images in the template but I couldn't find any solution to my case.

This is my settings

STATIC_URL = '/static/'

MEDIA_URL = '/media/'

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

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATICFILES_DIRS = [
 os.path.join(BASE_DIR, 'DataCallGuide/static')
]

My model

class TroubleshootingSteps(models.Model):

    box_header = models.CharField(blank=True, null=True, max_length=250)
    box_content = models.CharField(blank=True, null=True, max_length=250)
    box_botton = models.CharField(blank=True, null=True, max_length=250)

    header = models.TextField(blank=True, null=True)
    sub_header = models.TextField(blank=True, null=True)
    text1 = models.TextField(blank=True, null=True)
    image1 = models.ImageField(blank=True, null=True, upload_to="images/")

and the template

{% extends 'base.html' %}
{% load static %}
{% block content %}

 <div class="container overflow-hidden">
  <div class="text-center">
   <h4 class="mt-5 mb-5">{{data.header}}</h4>
  </div>

  <h3 dir="rtl" class="rtlss">{{data.sub_header}}</h3>
  <img src="{{ data.image1.url }}">

  </div>

{% endblock%}

Also when I click on the image link in admin pages it doesn't show the image and display page not found error with the below link http://127.0.0.1:8000/media/images/IMG-20220901-WA0009.jpg What is wrong please?

Does this image exist in expected directory? And show urls.py please and maybe the view which populates data — IVNSTN
– IVNSTN, Commented Nov 12, 2022 at 6:32
Share your whole project structure. Are images uploading in the images folder inside media folder or not? — Sunderam Dubey
– Sunderam Dubey, Commented Nov 12, 2022 at 6:58

Mahammadhusain kadiwala · Accepted Answer · 2022-11-12 08:32:58Z

If images not load from static folder then do this

# do comment static root path

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

# add static dirs path like this

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

#----------- OR ---------------

STATICFILES_DIRS = [BASE_DIR / 'static']

If images not load from media folder then do this

# --------- Show Image in Html   ---------

# Add Code in Project (urls.py)
from django.contrib import admin
from django.urls import path,include

from django.conf import settings # --------> this
from django.conf.urls.static import static # --------> this

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls')),
]+static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # --------> this

# Add Code in Project (setting.py)
# MEDIA_ROOT =  os.path.join(BASE_DIR, 'media') 
MEDIA_ROOT =  BASE_DIR / 'media' 
MEDIA_URL = '/media/'

Manoj Tolagekar · Accepted Answer · 2022-11-13 05:57:16Z

2

instead of this:

 <img src="{{ data.image1.url }}">

Try this way:

<img src="/media/{{ data.image1 }}">

edited Nov 13, 2022 at 5:57

answered Nov 12, 2022 at 5:01

Manoj Tolagekar

2,0082 gold badges7 silver badges25 bronze badges

Comments

saro · Accepted Answer · 2022-11-11 22:07:52Z

1

Did you modified your url.py?

urlpatterns = [
    Your urls
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

answered Nov 11, 2022 at 22:07

saro

8416 silver badges16 bronze badges

3 Comments

Islam Fahmy Over a year ago

Yes I did already

saro Over a year ago

Is your debug true or false in your settings.py

Islam Fahmy Over a year ago

It's True......

Collectives™ on Stack Overflow

Django images not showing up in template

3 Answers 3

If images not load from static folder then do this

If images not load from media folder then do this

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

If images not load from static folder then do this

If images not load from media folder then do this

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related