我对编程相当陌生，我正在尝试构建一个包含 Bootstrap 轮播的项目。我设法使用 picsum 中的图像来实现这一点，但是当我将源更改为本地存储的图像时，只有中间的轮播图像显示（默认情况下在 html 中处于“活动”状态的图像），而其他两个则出现损坏。此外，导航箭头也会消失。
这是我的 html，其中包含来自 picsum 的图像，可以使用：
<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2" class="active" aria-current="true"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3" class=""></button>
</div>
<a href="/about-us.html"><div class="carousel-inner">
<div class="carousel-item">
<img src="https://www.picsum.photos/2000/900" class="bd-placeholder-img" width="100%" height="100%" aria-hidden="true" preserveaspectratio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect>
</div>
<div class="carousel-item active">
<img src="https://www.picsum.photos/2000/900" class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveaspectratio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect>
</div>
<div class="carousel-item">
<img src="https://www.picsum.photos/2000/900" class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveaspectratio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect>
</div>
</div></a>
<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">Previous</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">Next</span>
</button>
<div class="carousel-caption">
<a class="carouselLink" href="./about-us.html"><h1 id="h1Carousel">Carousel Caption</h1></a>
</div>
</div>
这是我自己的图像：
<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2" class="active" aria-current="true"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3" class=""></button>
</div>
<a href="/about-us.html"><div class="carousel-inner">
<div class="carousel-item">
<img src="../public/images/image1.jpg" class="bd-placeholder-img" width="100%" height="100%" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect>
</div>
<div class="carousel-item active">
<img src="../public/images/image2.jpg" class="bd-placeholder-img" width="100%" height="100%" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect>
</div>
<div class="carousel-item">
<img src="../public/images/image3.jpg" class="bd-placeholder-img" width="100%" height="100%" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect>
</div>
</div></a>
<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">Previous</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">Next</span>
</button>
<div class="carousel-caption">
<a class=carouselLink href="./about-us.html"><h1 id="h1Carousel">Carousel Caption</h1></a>
</div>
</div>
我唯一改变的其他事情是在我注意到它不起作用之后，我认为可以修复它，所以我从第二个轮播项目中删除了 xmlns 值，但这似乎没有改变任何东西。
我认为这可能与“活跃”班级有关，但就是不知道是什么，有人可以帮忙吗？
看起来您在标签内使用了元素，这是不正确的，可能会导致问题。删除元素并仅使用标签来显示图像：
<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2" class="active" aria-current="true"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3" class=""></button>
</div>
<a href="/about-us.html"><div class="carousel-inner">
<div class="carousel-item">
<img src="public/images/image1.jpg" class="d-block w-100" alt="Image 1">
</div>
<div class="carousel-item active">
<img src="public/images/image2.jpg" class="d-block w-100" alt="Image 2">
</div>
<div class="carousel-item">
<img src="public/images/image3.jpg" class="d-block w-100" alt="Image 3">
</div>
</div></a>
<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">Previous</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">Next</span>
</button>
<div class="carousel-caption">
<a class="carouselLink" href="./about-us.html"><h1 id="h1Carousel">Carousel Caption</h1></a>
</div>
</div>
还要确保您已正确链接 css 文件。
如果这不起作用，如果从 Picsum 加载图像有效，为什么不尝试将图像上传到图像托管服务并将它们链接到
<img>