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

【问题标题】：displaying images using for loop in html在html中使用for循环显示图像
【发布时间】：2021-07-09 19:01:58
【问题描述】：

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

<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})

【问题讨论】：

标签： python html django-models django-templates responsive-images

【解决方案1】：

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

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

【讨论】：

谢谢！它确实有效，但我无法对它们应用一些属性，如 display 和 flex。