如何在我的视图页面 django 中显示图像

Question

当员工单击查看按钮时，我创建了一个页面，它应该将他们重定向到查看页面并相应地显示出来，就像当用户单击 id 1 的查看按钮时，它应该显示 id 1 图像出来了，但是没有显示出来。

这就是我的收视页面的样子。

当工作人员点击查看按钮时，url 确实设法获取了 id 但图像没有显示出来。

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/'

我做错了什么？

Answer 1

向用户显示使用 Django 保存的图像

1) 定义模型中的图像文件：

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

2) 安装pillow： 在你的虚拟环境中pip install pillow

3) 在设置中为MEDIA_ROOT 提供一个值： MEDIA_ROOT = BASE_DIR / 'media' 或 MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 用于 Django2。

4) 在设置中为MEDIA_URL 提供一个值，并为项目urls.py 文件提供一个新指令： MEDIA_URL = '/media/# 在设置中 urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # 在项目的 urls.py 中

5) 像这样在模板中显示图像： <img src="{{ Photo.image.url }}"/>

注意：检查最后一步，我想你错过了