Bootstrap轮播仅显示首张图片，切换其余图片时呈现空白区域

这种情况我之前排查过好多次，大概率是轮播的结构、图片路径或者类名配置出了小问题，咱们一步步来排查修复：

1. 检查active类的设置是否正确 #

Bootstrap轮播要求只有第一个轮播项带有active类，用来标记初始显示的内容。如果多个carousel-item都加了active，或者后面的项误加了这个类，就会导致切换时出现空白。
正确的基础结构应该是这样的：

<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <!-- 仅首张轮播项加active -->
    <div class="carousel-item active">
      <img src="01-lh.jpg" class="d-block w-100" alt="首张图">
      <div class="carousel-caption">
        <h5>首张图标题</h5>
        <p>首张图描述</p>
      </div>
    </div>
    <!-- 后面的轮播项不要加active -->
    <div class="carousel-item">
      <img src="02-lx.jpg" class="d-block w-100" alt="第二张图">
      <div class="carousel-caption">
        <h5>第二张图标题</h5>
        <p>第二张图描述</p>
      </div>
    </div>
    <!-- 剩余轮播项同理 -->
  </div>
  <!-- 切换按钮 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">上一张</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">下一张</span>
  </button>
</div>

你要仔细确认：后面的carousel-item都没有额外添加active类，只有第一个轮播项保留这个类。

2. 校验图片路径的准确性 #

你提到替换首张图的src能显示对应图片，说明单张图片的路径逻辑是对的，但要确认后面几张图的路径完全没问题：

• 注意文件名大小写：比如你写的是02-lx.jpg，实际文件是不是02-LX.jpg？如果是部署在Linux服务器上，系统是区分大小写的，路径大小写不匹配会直接导致图片加载失败（浏览器控制台的「网络」标签会显示404状态）。
• 确认相对路径层级：如果图片放在子文件夹（比如img/）里，要保证所有轮播项的路径层级一致，不要有的写img/02-lx.jpg有的直接写02-lx.jpg。

3. 确认图片的必备类是否齐全 #

每张轮播图必须添加d-block w-100这两个类，这是Bootstrap用来保证图片填满轮播容器的关键：

• d-block：把图片从默认的行内元素改成块级元素，避免出现不必要的间隙。
• w-100：让图片宽度占满容器，防止因图片尺寸过小导致显示空白。
  如果少了这两个类，很可能出现图片不显示但描述正常的情况。

4. 检查Bootstrap资源的引入是否正确 #

如果用的是Bootstrap 5，要确保你完整引入了CSS和包含Popper的JS文件（Bootstrap 5的组件依赖Popper）：

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JS + Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

如果是Bootstrap 4，引入的文件会略有不同，但核心是要保证JS文件正确加载——轮播的切换逻辑完全依赖Bootstrap的JS来切换active类和控制动画。

5. 排查自定义CSS的冲突 #

如果你写了额外的自定义样式，可能不小心覆盖了Bootstrap轮播的默认样式：

• 检查是否给carousel-item或carousel-inner加了display: none、opacity: 0这类会隐藏元素的样式。
• 检查是否修改了轮播容器的尺寸，导致图片无法正常显示。
  可以暂时移除自定义CSS，测试轮播是否恢复正常，再逐步排查冲突的样式代码。

按照上面的步骤排查，基本就能解决问题了。如果还是不行，可以把你的完整轮播代码贴出来，我帮你再仔细分析~

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