Display an image in django template from model

Question

I have a django model to store some images in django model but when I am trying to show this image it shows the broken image sign instead of the image.

Models.py

class Uploaded_pod(models.Model):
    document = models.FileField(upload_to='pods/')
    lr_connected = models.ForeignKey(DeliveredDocket, on_delete=models.CASCADE, related_name='delivered_pod')

Views.py

#upload POD
def pod_upload (request, pk):
    lr_object = get_object_or_404(DeliveredDocket, id=pk)
    print(lr_object)
    if request.method == 'POST':
        form = UploadPODform(request.POST, request.FILES)

        if form.is_valid():
            obj = form.save(commit=False)
            obj.lr_connected = lr_object
            obj.save()
            messages.success(request, 'The POD was Uploaded with success!')
            return redirect('employee:delivered_docket_table')

    else:
        form = UploadPODform()
        form.lr_connected = lr_object

    return render(request, 'packsapp/employee/model_form_upload.html', {'form': form})

#show pod
def list(request,pk):
    print("function called with pk ",pk)

    images = Uploaded_pod.objects.filter(lr_connected = pk)
    return render(request, "packsapp/employee/list.html", {'images': images})

HTML

{% extends 'base.html' %}

{% block content %}

{% for i in images %}
    <img src="{{ i.image.url }}" width="500px"/>
{% endfor %}

{% endblock %}

Settings.py

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

What is it that I am doing wrong? Please Help!

Answer 1

I assume you stored image with the name of document, so call it

{% for i in images %}
    <img src="{{ i.document.url }}" width="500px"/>
{% endfor %}

Also add the following in your settings

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

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media_cdn")

and in main url

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)