在 Django 中使用 For 循环和 If 条件在 Bootstrap Carousel 中显示图像

问题描述

我一直在到处寻找与此类似的案例,但没有找到任何可以解决我的问题的方法。我想在我的 html 中的 for 循环中显示来自模型的图像,该循环具有 if 条件。这是我的models.py:

from django.db import models

# Create your models here.


class CarouselItem(models.Model):
    carousel_picture = models.ImageField(upload_to='carousel_images/',null=True,blank=True)

views.py:

from django.shortcuts import render
from .models import CarouselItem

# Create your views here.


def index(request):
    carousel_items = CarouselItem.objects.all()
    context = {
        'carousel_items': carousel_items
    }
    return render(request,"home/index.html",context=context)

和我的 html:

    {% if carousel_items %}
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
  {% for item in carousel_items %}
      {% if forloop.first %}
        <div class="carousel-item active">
          <img src="{% item.carousel_picture.url %}" class="d-block w-100" alt="...">
        </div>
      {% else %}
        <div class="carousel-item">
          <img src="{% item.carousel_picture.url %}" class="d-block w-100" alt="...">
        </div>
      {% endif %}
  {% endfor %}
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">PrevIoUs</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
{% else %}
    <h3>We are sorry,there are currently no Images to display</h3>
{% endif %}

当我想访问与 html 关联的页面时,我收到此错误消息:

Invalid block tag on line 86: 'item.carousel_picture.url',expected 'elif','else' or 'endif'. Did you forget to register or load this tag?

我觉得我在其他地方犯了一个错误,但我不知道是什么。我正在使用 Bootstrap 4.5.3 和 Django 3.1.5

该项目中的所有其他 html 文件在使用 for 循环显示图像时都没有问题。

解决方法

而不是使用:

{% item.carousel_picture.url %}

用于模板逻辑,使用:

{{ item.carousel_picture.url }}

使用该值。