为什么我使用Bootstrap5实现的carousel轮播图中的图片无法正常显示？

以下是具体问题原因及修复方法：

• 轮播项缺失active类：Bootstrap轮播默认需要给第一个轮播项添加active类才能触发渲染，无该类时所有轮播项默认处于隐藏状态，容器高度为0，图片无法正常展示。
• 图片未添加轮播专用适配类：Bootstrap 5轮播要求内部图片必须添加d-block和w-100类，用来清除默认行内元素对齐偏差，同时让图片自适应轮播容器宽度。
• 图片链接存在多余空格：所有<img>标签的src属性值末尾多了一个无效空格，部分浏览器会将空格识别为URL的一部分，导致资源请求失败。

修正后的轮播核心代码示例 #

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <!-- 给第一个轮播项添加active类 -->
    <div class="carousel-item active">
      <!-- 移除src末尾空格，添加d-block w-100类 -->
      <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800172/yelpcamp/pvor5gkvw0myrneq0rot.png" class="d-block w-100" alt="yelpcamp/pvor5gkvw0myrneq0rot">
    </div>
    <div class="carousel-item">
      <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800173/yelpcamp/ykqrdngzexb7nqn5dbg1.jpg" class="d-block w-100" alt="yelpcamp/ykqrdngzexb7nqn5dbg1">
    </div>
    <div class="carousel-item">
      <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800173/yelpcamp/lr4ng21ocdqtyq2vqfxt.jpg" class="d-block w-100" alt="yelpcamp/lr4ng21ocdqtyq2vqfxt">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

修改完成后刷新页面即可正常显示轮播图片。

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