Why does the image not appear in the template when I run Django

  • List item Tried several ways in all available ways to show the image in the template, but it did not appear, but in django - admin add and show
  • List item Tried several ways in all available ways to show the image in the template, but it did not appear, but in django - admin add and show

modles.py

class Delivery(models.Model):
           # order = models.ForeignKey(Order, on_delete=models.CASCADE)
           ddesign = models.CharField(max_length=50,null=True)
           buyer = models.ForeignKey(Buyer, on_delete=models.CASCADE, null=True)
           dcolor = models.CharField(max_length=50,null=True)
           courier_name = models.CharField(max_length=120)
           frist_name = models.CharField(max_length=120,null=True)
           scand_name = models.CharField(max_length=120,null=True)
           therd_name = models.CharField(max_length=120,null=True)
           ford_name = models.CharField(max_length=120,null=True)
           fifth_name = models.CharField(max_length=120,null=True)
           dimg = models.ImageField(null=True, blank=True ,upload_to='media/')
           created_date = models.DateField(auto_now_add=True)
             def __str__(self):
                 return self.ddesign

forms.py

> class DeliveryForm(forms.ModelForm):
>     class Meta:
>         model = Delivery
>         fields = '__all__'
> 
>         widgets = {
>            
>              'ddesign': forms.TextInput(attrs={
>                 'class': 'form-control', 'id': 'ddesign'
>             }),
>              'buyer': forms.Select(attrs={
>                 'class': 'form-control', 'id': 'buyer'
>             }),
>              'dcolor': forms.TextInput(attrs={
>                 'class': 'form-control', 'id': 'dcolor'
>             }),
>             'courier_name': forms.TextInput(attrs={
>                 'class': 'form-control', 'id': 'courier_name'
>             }),
>             'frist_name': forms.TextInput(attrs={
>                 'class': 'form-control', 'id': 'frist_name'
>             }),
>             'scand_name': forms.TextInput(attrs={
>                 'class': 'form-control', 'id': 'scand_name'
>             }),
>             'therd_name': forms.TextInput(attrs={
>                 'class': 'form-control', 'id': 'therd_name'
>             }),
>             'ford_name': forms.TextInput(attrs={
>                 'class': 'form-control', 'id': 'ford_name'
>             }),
>             'fifth_name': forms.TextInput(attrs={
>                 'class': 'form-control', 'id': 'fifth_name'
>             }),
>             'dimg': forms.Select(attrs={
>                 'class': 'form-control', 'id': 'dimg'
>             })
>             
>         }

vews.py

@login_required(login_url='login')
def create_delivery(request):
    forms = DeliveryForm()
    if request.method == 'POST':
        forms =DeliveryForm(request.POST)
        
        if forms.is_valid():
            ddesign = forms.cleaned_data['ddesign']
            buyer     = forms.cleaned_data['buyer']
            dcolor   = forms.cleaned_data['dcolor']
            courier_name    = forms.cleaned_data['courier_name']
            frist_name = forms.cleaned_data['frist_name']
            scand_name  =forms.cleaned_data['scand_name']
            therd_name = forms.cleaned_data['therd_name']
            ford_name     = forms.cleaned_data['ford_name']
            fifth_name   = forms.cleaned_data['fifth_name']
            dimg    = forms.cleaned_data['dimg']
            Delivery.objects.create(
                ddesign=ddesign,
                buyer=buyer,
                dcolor=dcolor,
                courier_name=courier_name,
                frist_name=frist_name,
                scand_name=scand_name,
                therd_name=therd_name,
                ford_name=ford_name,
                fifth_name=fifth_name,
                dimg=dimg,
            )
        return redirect('delivery-list')
    context = {
        'form': forms
    }
    return render(request, 'store/create_delivery.html', context)

def updateDelivery(request, pk):
    delivery = Delivery.objects.get(id =pk)
    forms = DeliveryForm(instance=delivery)
    if request.method == 'POST':
        forms = DeliveryForm(request.POST, instance=delivery)
        if forms.is_valid():
            forms.save()
            return redirect('delivery-list')
    context = {'form':forms}
    return render(request, 'store/create_delivery.html', context)
def deleteDelivery(request, pk):
    delivery = Delivery.objects.get(id=pk)
    if request.method == "POST":
        delivery.delete()
        return redirect('delivery-list')
    context = {'item':delivery}
    return render(request, 'store/delivery_delete.html', context)    
class DeliveryListView(ListView):
    model = Delivery
    template_name = 'store/delivery_list.html'
    context_object_name = 'delivery'

lest.html

    <tbody>
     {% if delivery %}
     {% for delivery in delivery %}
           <tr>
             <td class="serial">{{ forloop.counter }}</td>
             <td>{{ delivery.ddesign }}</td>
             <td>{{ delivery.buyer }}</td>
             <td>{{ delivery.dcolor }}</td>
             <td >{{ delivery.courier_name}}</td>
             <td>{{ delivery.frist_name }}</td>
             <td>{{ delivery.scand_name }}</td>
             <td>{{ delivery.ford_name }}</td>
             <td>{{ delivery.fifth_name }}</td>
             <td><img src="{{delivery.dimg.url}}"></td>
             <td style="font-size: 18px;text-align: center;">{{ delivery.created_date }</td>
             <td>
                <a class="btn btn-sm btn-info" href="{% url 'updete_delivery' delivery.id %}">Modify</a>
            </td>
             <td><a class="btn btn-sm btn-danger" href="{% url 'delete_delivery' delivery.id %}">del</a>
            </td>
      </tr>
     {% endfor %}
     {% else %}
          <tr>
             <td>no information</td><
          /tr>
    {% endif %}
    </tbody

creat.html

 <div class="form-group">
    <label for="dimg" class="control-label mb-1">insert photo</label>{{ form.dimg }}</div>
    <div><button id="payment-button" type="submit" class="btn btn-lg btn-info btn-block">
    <span id="payment-button-amount">add</span></button></div>

urls.py

 path('create-delivery/', create_delivery, name='create-delivery'),
    path('updete_delivery /<str:pk>/', updateDelivery, name='updete_delivery'),
    path('delete_delivery/<str:pk>/', deleteDelivery, name="delete_delivery"),
    path('delivery-list/', DeliveryListView.as_view(), name='delivery-list'),

Create a folder named static in your project root and inside the static folder create media folder which will hold the uploaded images then, try configuring your static files in your settings.py by adding the bellow lines right after STATIC_URL = 'static/'

MEDIA_URL = 'media/'
STATICFILES_DIRS = [BASE_DIR / 'static']
STATIC_ROOT = BASE_DIR / 'staticfiles/'
MEDIA_ROOT = BASE_DIR / 'static/media'

Then add the links for your media in your project urls.py as follows

from django.conf import settings
from django.conf.urls.static import static
.......

urlpatterns = [
    ....
]
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

You are all set now run python manage.py collectstatic in your terminal. Now last thing to do is to load static in your template at the top of your template.

{% load static %}
<tbody>
 {% if delivery %}
 {% for delivery in delivery %}
       <tr>
         <td class="serial">{{ forloop.counter }}</td>
         <td>{{ delivery.ddesign }}</td>
         <td>{{ delivery.buyer }}</td>
         <td>{{ delivery.dcolor }}</td>
         <td >{{ delivery.courier_name}}</td>
         <td>{{ delivery.frist_name }}</td>
         <td>{{ delivery.scand_name }}</td>
         <td>{{ delivery.ford_name }}</td>
         <td>{{ delivery.fifth_name }}</td>
         <td><img src="{{delivery.dimg.url}}"></td>
         <td style="font-size: 18px;text-align: center;">{{ delivery.created_date }</td>
         <td>
            <a class="btn btn-sm btn-info" href="{% url 'updete_delivery' delivery.id %}">Modify</a>
        </td>
         <td><a class="btn btn-sm btn-danger" href="{% url 'delete_delivery' delivery.id %}">del</a>
        </td>
  </tr>
 {% endfor %}
 {% else %}
      <tr>
         <td>no information</td><
      /tr>
{% endif %}
</tbody
Back to Top