【问题标题】:Image for loop in Django template htmlDjango模板html中的循环图像
【发布时间】:2021-12-26 15:50:53
【问题描述】:

想问一下Django中html模板中for循环如何生成图片:

此代码不起作用:

<ul>
    Plants:
    {% for plant in plants %}
        <li> <img src="{% static 'plant_photos/{{ plant.name }}.jpg' %}"> {{ plant.name }}</li>

    {% endfor %}
 </ul>

但如果我将这个:{{ plant.name }}.jpg 替换为这个:carrot.jpg 那么图像就会显示出来。

我保存在 static/plant_photos 中的所有图片,每张照片的名称都与植物的名称相对应。

models.py:

class Plant(models.Model):
    name = models.CharField(max_length=256)
    description = models.TextField(blank=True, default='')
    plant_image = models.ImageField(null=True, upload_to='static/plant_photos/', height_field=None, width_field=None, max_length=20)


class Garden(models.Model):
    name = models.CharField(max_length=256)
    description = models.TextField(blank=True, default='')
    address = models.CharField(max_length=512)
    plant = models.ManyToManyField(Plant, related_name="gardens", through="GardenPlant")

views.py:

def garden_detail(request, garden_name): 
garden_id = Garden.objects.get(name=garden_name).id 
   garden = Garden.objects.get(id=garden_id) 
   plants = Plant.objects.filter(gardens__name=garden_name) 
   context = { 
       'name': garden.name, 
       'description': garden.description, 
       'address': garden.address, 
       'plants': plants, } 
   return render(request, 'garden_detail.html', context=context)

结构:

garden_app
_templates
_static
__plant_photos
___carrot.jpg
___apple.jpg
___pear.jpg

...

【问题讨论】:

  • 请加你html、view、model、code
  • 添加你的问题不在评论部分
  • 带编辑按钮

标签: django image loops for-loop static


【解决方案1】:

我认为兴趣非常有限,但为了实现您的目标,您可以将完整的字符串从staticfiles 传递给静态标签,如下所示:

不要使用{% static ... %},试试这个:

{% load staticfiles %}
<ul> Plants:
{% for plant in plants %}
  {% with 'plant_photos/'|add:plant.name|add:'.jpg' as plant_photo %}

    <li><img src="{% static plant_photo %}">{{ plant.name }}</li>

  {% endwith %}
{% endfor %} </ul>

如需了解更多信息,this post 可以提供帮助。

【讨论】:

  • 它正在工作....非常感谢
  • 标记问题,因为它可以解决您的问题;-)
猜你喜欢
  • 1970-01-01
  • 2020-11-27
  • 2016-12-09
  • 2020-01-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-17
  • 1970-01-01
相关资源
最近更新 更多