如何在Django中使用Bootstrap Carousel实现图片轮播？

我在Django中尝试用Bootstrap Carousel为每个活动详情页展示关联的多张图片，但轮播无法正常显示，怀疑和settings.py的图片配置有关。以下是相关代码及修复步骤：

相关代码文件 #

admin.py #

from django.contrib import admin
from .models import Person, PersonDetail, Event, EventDetail, EventImage

admin.site.register(Person)
admin.site.register(PersonDetail)
admin.site.register(Event)
admin.site.register(EventDetail)
admin.site.register(EventImage)

models.py #

from django.db import models

class Person(models.Model):
    person_text = models.CharField(max_length=200)

    def __str__(self):
        return self.person_text


class PersonDetail(models.Model):
    person = models.ForeignKey(Person, on_delete=models.CASCADE)
    person_subtext = models.TextField()

    def __str__(self):
        return f"{self.person_subtext[:50]}..."


class Event(models.Model):
    event_text = models.CharField(max_length=200)

    def __str__(self):
        return self.event_text


class EventDetail(models.Model):
    event = models.ForeignKey(Event, on_delete=models.CASCADE)
    event_subtext = models.TextField()

    def __str__(self):
        return self.event_subtext
    

class EventImage(models.Model):
    event = models.ForeignKey(Event, on_delete=models.CASCADE)
    image = models.ImageField(upload_to='pics/%y/%m/%d/')
    title = models.CharField(max_length=150)
    sub_title = models.CharField(max_length=100)

    def __str__(self):
        return self.title

views.py #

from django.shortcuts import render

from .models import Person, Event, EventImage

def index(request):
    """The home page for History Gallery."""
    return render(request, 'galleries/index.html')


def persons(request):
    """Show all persons."""
    persons = Person.objects.all()
    context = {'persons': persons}
    return render(request, 'galleries/persons.html', context)


def person_detail(request, person_id):
    """Show a single person's details."""
    person = Person.objects.get(id=person_id)

    person_details = person.persondetail_set.all()
    context = {'person': person, 'person_details': person_details}
    return render(request, 'galleries/person_detail.html', context)


def events(request):
    """Show all events."""
    events = Event.objects.all()
    context = {'events': events}
    return render(request, 'galleries/events.html', context)


def event_detail(request, event_id):
    """Show a single event's details."""
    event = Event.objects.get(id=event_id)
    images = EventImage.objects.all()

    event_details = event.eventdetail_set.all()
    context = {'event': event, 'event_details': event_details, 'images': images}
    return render(request, 'galleries/event_detail.html', context)

event_detail.html #

{% extends 'galleries/base.html' %}


{% block page_header %}
  <h1>{{ event.event_text }}</h1>
{% endblock page_header %}


{% block content %}


  {% for event_detail in event_details %}
    <div class="card mb-3">
      <!-- Card header with timestamp and edit link -->
      <h4 class="card-header">
        <p>Details</p>
      </h4>
      <!-- Card body with entry text -->
      <div class="card-body">{{ event_detail.event_subtext|linebreaks }}</div>
    </div>
  {% empty %}
    <p>There are no details for this event yet.</p>
  {% endfor %}


  <div id="carouselExampleCaptions" class="carousel slide">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      {% for image in images %}
      <div class="carousel-item active">
        <img src="{{ image.images.url }}" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>{{ image.title }}</h5>
          <p>{{ image.sub_title }}</p>
        </div>
      </div>
      {% endfor %}
  </div>


{% endblock content %}

修复步骤 #

1. 配置settings.py的媒体文件路径 #

在settings.py中添加以下代码，让Django正确识别上传的图片：

import os

# 媒体文件本地存储路径
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
# 媒体文件的访问URL前缀
MEDIA_URL = '/media/'

2. 配置项目根urls.py的媒体路由 #

在项目根目录的urls.py中添加媒体文件的访问路由（仅开发环境使用，生产环境需用Nginx等服务器处理）：

from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('galleries.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

3. 修正视图的图片查询逻辑 #

当前视图获取了所有活动的图片，需要改为只获取当前活动关联的图片：

def event_detail(request, event_id):
    """Show a single event's details."""
    event = Event.objects.get(id=event_id)
    # 仅查询当前活动关联的图片
    images = event.eventimage_set.all()

    event_details = event.eventdetail_set.all()
    context = {'event': event, 'event_details': event_details, 'images': images}
    return render(request, 'galleries/event_detail.html', context)

4. 修复模板中的图片路径错误 #

模板中image.images.url是错误字段名，应改为模型中定义的image字段：

<img src="{{ image.image.url }}" class="d-block w-100" alt="{{ image.title }}">

5. 修正轮播项的active类逻辑 #

Bootstrap轮播仅第一个项需要active类，同时补充轮播控制按钮：

<div class="carousel-inner">
  {% for image in images %}
  <div class="carousel-item {% if forloop.first %}active{% endif %}">
    <img src="{{ image.image.url }}" class="d-block w-100" alt="{{ image.title }}">
    <div class="carousel-caption d-none d-md-block">
      <h5>{{ image.title }}</h5>
      <p>{{ image.sub_title }}</p>
    </div>
  </div>
  {% endfor %}
</div>
<!-- 添加轮播切换按钮 -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>

6. 安装图片处理依赖 #

使用ImageField需要安装Pillow库：

pip install pillow

内容的提问来源于stack exchange，提问作者Brian Ibale