view images uploaded from admin on html in django - 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