Как отобразить несколько изображений в элементе img шаблона django

У меня проблема с отображением нескольких изображений, размещаемых пользователями в одном элементе шаблона img, по одной причине, если я пытаюсь получить изображения со стандартным связанным именем, они не отображаются в шаблоне, и я задаюсь вопросом, что я делаю неправильно. Может ли кто-нибудь помочь! Вот моя модель для post.

class Post(models.Model):
    page = models.ForeignKey(Page, on_delete=models.CASCADE, related_name="page")
    username = models.ForeignKey(settings.AUTH_USER_MODEL,on_delete=models.CASCADE ,related_name="page_user")
    description = models.TextField(max_length=500, blank=True)
    video = models.FileField(upload_to="PageVideos", blank=True)
    pic = models.ImageField(blank=True)
    date_posted = models.DateTimeField(auto_now_add=True)
    tags = models.CharField(max_length=100, blank=True)

    class Mete:
        ordering = ['-date_posted']
    
    def __str__(self):
        return self.description
   

class PostImage(models.Model):
    #page = models.ForeignKey(Page, on_delete=models.CASCADE, related_name="pg")
    post = models.ForeignKey(Post, default=None, on_delete=models.CASCADE)
    images= models.ImageField(upload_to="postimages/")

Вот мой детальный вид

def page_detail(request,id):
    post = get_object_or_404(Post, id=id)
    photos = PostImage.objects.filter(post=post)

    context = {
        'post':post,
        'photos':photos
    }
    return render(request, 'page/detail.html',context)

Это мой Шаблон для отображения изображений пользователей

 <div class="p-3 border-b dark:border-gray-700">
      {{ post.description }}
     </div>
     <div uk-lightbox>
        <div class="grid grid-cols-2 gap-2 p-2">
         {% for p in photos.images_set.all %}
         
            <a id="images" href="{{ p.images.url }}"  class="col-span-2" >  
                <img src="{{ p.images.url }}"  alt="" class="rounded-md w-full lg:h-76 object-cover">
            </a>
            <a href="">  
                <img src="" alt="" class="rounded-md w-full h-full">
            </a>
            <a href="" class="relative">  
                <img src="" alt="" class="rounded-md w-full h-full">
                <div class="absolute bg-gray-900 bg-opacity-30 flex justify-center items-center text-white rounded-md inset-0 text-2xl"> + see more </div>
            </a>
   
       {% endfor %}
        </div>
     </div>

ваши фотографии - это список, вам не нужен обратный m2m ("images_set") просто измените это в html

....
<div class="grid grid-cols-2 gap-2 p-2">
 {% for p in photos %}
  ....

для оптимизации вы можете сделать это

from django.http import Http404
...
def page_detail(request,id):
    try:
       # with prefetch you do only one sql request
       post = Post.objects.get(id=id).prefetch_related('images_set')
    expect Post.DoesNotExist as err:
        raise Http404(err)

    context = {
        'post': post,
        'photos': post.images_set.all()
    }
    return render(request, 'page/detail.html',context)
Вернуться на верх