How to use API rest Framework for Images in Django

hello guys I am trying to create product model for my product details .i have some images for one product .i want to add multiple images in my django dashboard so i wrote this codes now i want show them in my template but i cant why? Here's my: :

  class Product(models.Model):
    name =models.CharField(max_length=100,verbose_name='نام محصول')
    header_pic = models.ImageField(upload_to="images/products",verbose_name='تصویر اصلی',     
    created_date =models.DateField(auto_now_add=True)
    description = RichTextField(blank = True , null=True)

class Image(models.Model):
    product = models.ForeignKey(Product, default=None, on_delete=models.CASCADE,   related_name="product_images")
    image = models.ImageField(upload_to="images/products/product-images",verbose_name='تصویر', null= True , blank=True)  
    def get_image_url(self):
        return self.image.url :

from django.db.models import fields
from rest_framework import serializers

from .models import Product, Image

class ImageSerializer(serializers.ModelSerializer):
    class Meta:
        model = Image
        fields = "__all__"

class ProductSerializer(serializers.HyperlinkedModelSerializer):
   images = serializers.SerializerMethodField()

   def get_images(self, product):
       return ImageSerializer(product.product_images.all(), many=True).data

   class Meta:
       model = Product
       fields = ('id','images') :

class ImageViewSet(viewsets.ModelViewSet):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer

from django.contrib import admin
from .models import Product , ProductCategory ,Image
from . import models

class ImageAdmin(admin.StackedInline):
    model = models.Image
    extra = 4
class ProductAdmin(admin.ModelAdmin):
    inlines = [ImageAdmin]
    readonly_fields=('views', )
    class Meta:
       model = Product
class ImageAdmin(admin.ModelAdmin):

template.html :

   <div class="product-bottom-slider owl-theme owl-carousel" id="sync2">
   {% for img in  images %}                   
   <div class="slide-top-item">
   <div class="slide-inner">
    <img src="{{img.image.url}}" alt="product">
   {% endfor %}

Did you installed Pillow?

You can do this:

class Image(models.Model):

image = models.ImageField(upload_to='static/img/card_image/%Y/%m/%d', blank=True)


<img src="/{{ product.image }}" height="" width="" alt="{{ product.product_name }}" class="img-fluid" alt="">
Back to Top