view images uploaded from admin on html in django

Question

I am learning to write a Django app which will fetch all images from os.path.join(BASE_DIR, 'media_root', 'uploads') and show it on html page.

But its not working like so.

admin.py

from .models import Experience
# Register your models here.
admin.site.register(Experience)

settings.py

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

models.py

class Experience(models.Model):
    id = models.AutoField(primary_key=True)
    image = models.ImageField(upload_to='uploads/', default='newbalance.jpg', height_field=None, width_field=None)
    studio_name = models.CharField(max_length=255)
    designation = models.CharField(max_length=255)
    duration = models.CharField(max_length=255)
    description_short = models.TextField()
    description_long = models.TextField()
    keywords = models.CharField(max_length=255)
    date = models.DateTimeField('DateAdded',
             auto_now=True, auto_now_add=False)

    class Meta:
        db_table = "experience"

    def __str__(self):
        return self.studio_name + ' ' + self.duration

views.py

class ExperienceList(generic.ListView):
    model = Experience
    template_name = 'resumesection.html'
    queryset = Experience.objects.all()

urls.py

urlpatterns = [
    path('modelview/', views.ExperienceList.as_view(), name='experience_list'),
]

In error log,

2021-07-19 04:15:40,528: Not Found: /resume_site/modelview/uploads/atomic_arts.png
2021-07-19 04:15:41,239: Not Found: /resume_site/modelview/uploads/futureworks.jpg

I presume django should read image from 'MEDIA_ROOT/uploads' folder but it reads from '/resume_site/modelview/uploads/'. Which is not there.

I come close to the answer in this post Django admin view uploaded photo , But cannot connect the dots between 'MEDIA_ROOT/uploads' and '/resume_site/modelview/uploads/'

How does viewing image, uploaded from admin, work in django. ?

EDIT: Part of resumesection.html in context

{% for exp in object_list %}
    <h5>{{exp.studio_name}} | {{exp.duration}}</h5>
    <img src="{{exp.image}}">
    <p id="description_short_text">
        {{exp.description_short}}
    </p>
    <p id="text" style="display:none;color:red">
        {{exp.description_long}}
    </p>
    <h4 id='keywords_text' style="display:block;color:green">KEYWORDS</h4>
    <p id='alt_text' style="display:block;color:green">{{exp.keywords}}</p>
{% endfor %}

urls.py in project

urlpatterns = [
    path('admin/', admin.site.urls),
    path('barefoot/', include('barefoot.urls')),
    path('resume_site/', include('resume_site.urls')),
    path('photo_gallery/', include('photo_gallery.urls')),    
]

if settings.DEBUG:    # added
    import debug_toolbar
    urlpatterns += [path('__debug__/', include(debug_toolbar.urls))]
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Answer 1

if you are want to fetch a file from a db & want to place in src you have to provide .url in last

so use this

<img src="{{ exp.image.url }}">

instead of

<img src="{{exp.image}}">

read this for better understanding https://docs.djangoproject.com/en/3.2/topics/files/ and tell me if you still getting error