How do I display image in my view page django

Question

I have created a page when the staff click on the view button, it should redirect them to the view page and display it out accordingly, like when the user click on the view button for id 1 it should display the id 1 image out, but it is not displaying.

This is how it my viewreception page looks like.

when the staff click on the view button, the url did manage to get the id but image not displaying out.

models.py

class Photo(models.Model):
    class Meta:
        verbose_name = 'Photo'
        verbose_name_plural = 'Photos'

    datetime = models.DateTimeField()
    image = models.ImageField(null=False, blank=False)
    descriptionbox = models.TextField()
    serialno = models.TextField() 
    partno = models.TextField() 
    reception = models.TextField()
    customername = models.TextField()
    nonc = models.TextField()  # nonc stand for non conformity


    TypeOfNonConformity = models.TextField()

    def __str__(self):
        return self.descriptionbox

urls.py

urlpatterns = [

    path('register/', views.register, name='register'),
    path('adminpage/', views.admin, name='adminpage'),
    path('customer/', views.customer, name='customer'),
    path('logistic/', views.logistic, name='logistic'),
    path('forget/', views.forget, name='forget'),
    path('changepassword/', views.changepassword, name='changepassword'),

    path('newblock/', views.newblock, name='newblock'),
    path('quote/', views.quote, name='quote'),
    path('profile/', views.profile, name='profile'),
    path('adminprofile/', views.adminprofile, name='adminprofile'),

    path('', views.login_user, name='login'),
    path('home/', views.home, name='home'),
    path('allstaff/', views.allstaff, name='allstaff'),
    path('updatestaff', views.updatestaff, name='updatestaff'),
    path('delete/<int:id>/', views.delete, name='delete'),
    path('deletephoto/<int:id>/', views.deletephoto, name='deletephoto'),

    path('update/<int:id>/', views.update, name='update'),
    path('logout/', views.logout_view, name='logout'),
    path('register/', views.register_view, name='register'),
    path('edit-register/', views.edit_register_view, name='edit_register'),
    path('edit_profile/', views.edit_profile, name='edit_profile'),
    path('ReceptionUnserviceable/', views.ReceptionUnserviceable, name='ReceptionUnserviceable'),
    path('success', views.success, name='success'),
    path('logisticprofile', views.logisticprofile, name='logisticprofile'),
    path('viewreception/', views.viewreception, name='viewreception'),
    path('view/<str:pk>/', views.view, name='view'),
    path('outgoingLRU/', views.outgoingLRU, name='outgoingLRU'),

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

views.py

@login_required()
def view(request, pk):

    alldescription = Photo.objects.get(id=pk)

    return render(request, 'view.html', {'alldescription': alldescription})

view.html

    {% extends "logisticbase.html" %}
    {% block content %}
    <style>
    
    
    </style>
    
    
       
    
        <div style="padding-left:16px">
             <br>
               <h4>Reception Unserviceable  </h4>
         <div class="form-block">
        
        
          </tr>
        
        <img src="/media/{{Photo.image}}" width="250px">
        
        
        
         </div>
           </div>
        {% endblock %}

viewreception.html

{% extends "logisticbase.html" %}
{% block content %}
<style>
table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}


h4{color: #006E33;}

</style>


   <div style="padding-left:16px">
     <br>
       <h4>Reception Unserviceable  </h4>
       <p>To delete, click on the delete button.</p>
 <div class="form-block">

  </tr>
         {% for Photo in description %}
     <div class="col-md-9">
         <div class="row">
             <div class="col-md-5">
                 <div class="card my-2">
                     <img class="image-thumbail" src="/media/{{Photo.image}}"  width="250px">
                     <br>

                     <div class="card-body">
                         <small>Customer Name: {{Photo.customername}}</small>
                         <br>
                         <small>Date and Time: {{Photo.datetime}}</small>
                     </div>
                     <form action="{% url 'view' Photo.id %}" method="post">
                          {% csrf_token %}
                          <button type="submit" class="btn btn-sm btn-info" style="width: 460px">View</button>
                      </form>



                     <br>
                      <form action="{% url 'deletephoto' Photo.id %}" method="post">
                          {% csrf_token %}
                          <button type="submit" class="btn btn-sm btn-danger" style="width: 460px">Delete</button>
                      </form>
                 </div>
             </div>
         </div>
     </div>




{% endfor %}






</div>
   </div>
{% endblock %}

settings.py

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

what did I do wrong?

Could you also add your media configs in your `settings.py`? — black, Sep 22 '21 at 07:13
the image is both available in my media and my database so I am not sure why it is not displaying out — Shadowwalker, Sep 22 '21 at 07:18
just use Photo.image.url if Photo is the context name you are passing — Pavan Kumar T S, Sep 22 '21 at 07:32
inspect your browser and and check rendered image url, also post your views — Pavan Kumar T S, Sep 22 '21 at 07:36

score 0 · Answer 1 · answered Sep 22 '21 at 10:16

To show users saved image with Django

1) Define the image filed in the model :

class Photo(models.Model):
    # By default null=False and blank=False 
    image = models.ImageField(upload_to="photos/")
    # Others fields here

2) Install pillow : in your virtual env pip install pillow

3) Provide a value to MEDIA_ROOT in settings : MEDIA_ROOT = BASE_DIR / 'media' or MEDIA_ROOT = os.path.join(BASE_DIR, 'media') for Django2.

4) Provide a value to MEDIA_URL in settings and a newdirective to the project urls.py file: MEDIA_URL = '/media/ # in settings urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # in urls.py of the project

5) Display the image in the template like this : <img src="{{ Photo.image.url }}"/>

NB : Check the last step, i think you missed it

How do I display image in my view page django

1 Answers1

Linked