如何在 django 模板 img 元素中显示多个图像

Question

我在显示用户发布到一个 img 模板元素的多个图像时遇到了挑战，原因之一是如果我尝试使用默认相关名称获取图像，它不会显示在模板中，我想知道我做错了什么。任何人都可以提供帮助！ 这是我的帖子模型。

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>

Answer 1

您的照片是一个列表，您不需要反向 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.select_related('images_set').get(id=id)
    expect Post.DoesNotExist as err:
        raise Http404(err)

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