在html中使用for循环显示图像

问题描述

我是 django 的新手，现在我正在学习如何访问数据库中的图像并使用 html 显示它。我想将图像作为元素放在列表中，以使用 css 进一步设置样式并使页面响应，但我不想将每个图像都写为列表项，因为数据库中有 100 多个图像。我试过下面的代码，但它没有将图像显示为列表。请建议是否有更好的方法。我的 image 中有 models.py 作为模型。

<div class='gallery'>
  {% for x in photo %}
  <ul>
    <li><img class="images" src="{{x.image.url}}"/></li>
  </ul>
  {% endfor %}
</div>

这是参考模型：

from django.db import models
class Photo(models.Model):
    photo_uploader = models.CharField(max_length=50)
    desc = models.CharField(max_length=300)
    image = models.ImageField(upload_to="home/images")

这是视图：

def profile(request):
    username = None
    if request.user.is_authenticated:
        photos_to_show = []
        username = request.user.username
        photos = Photo.objects.filter(photo_uploader=username)
    return render(request,'profile.html',{'name': username,'photo': photos})
    

解决方法

<ul> 标签应该放在循环之外，否则你每次都会开始一个新的 <ul> 并结束那个 </ul> per 图像：

<div class='gallery'>
  <ul>
  {% for x in photo %}
    <li><img class="images" src="{{ x.image.url }}"/></li>
  {% endfor %}
  </ul>
</div>