Bootstrap中Card内Modal的Carousel图片重复显示问题求助

核心原因 #

大概率是Modal的ID重复，或者触发按钮的data-bs-target属性指向了同一个Modal容器，导致不管点击哪个按钮，打开的都是同一个Modal，自然显示同一张图。另外Carousel组件如果ID重复，也会导致内容串用。

具体修复步骤 #

1. 确保两个Modal的ID完全唯一
   检查两个Modal的id属性，比如一个设为modal-card，另一个设为modal-carousel，绝对不能重复：

   <!-- 第一个Modal（内含Card） -->
   <div class="modal fade" id="modal-card" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="card">
           <img src="path/to/first-image.jpg" class="card-img-top" alt="First Image">
         </div>
       </div>
     </div>
   </div>
   
   <!-- 第二个Modal（内含Carousel） -->
   <div class="modal fade" id="modal-carousel" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div id="carouselExample" class="carousel slide">
           <div class="carousel-inner">
             <div class="carousel-item active">
               <img src="path/to/second-image.jpg" class="d-block w-100" alt="Second Image">
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   

2. 触发按钮的data-bs-target要对应正确的Modal ID
   每个Card里的触发按钮，data-bs-target必须指向各自Modal的ID：

   <!-- 第一个Card的触发按钮 -->
   <div class="card">
     <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-card">
       打开Card Modal
     </button>
   </div>
   
   <!-- 第二个Card的触发按钮 -->
   <div class="card">
     <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-carousel">
       打开Carousel Modal
     </button>
   </div>
   

3. 检查Carousel的ID唯一性
   如果Carousel的ID重复，也可能导致内容被覆盖，确保Carousel的id和内部的data-bs-target（如果有控制按钮）都唯一：

   <div id="carouselUniqueId" class="carousel slide">
     <div class="carousel-inner">
       <!-- 轮播内容 -->
     </div>
     <button class="carousel-control-prev" type="button" data-bs-target="#carouselUniqueId" data-bs-slide="prev">
       <!-- 按钮图标 -->
     </button>
   </div>
   

4. 强制清除浏览器缓存
   有时候浏览器会缓存旧的图片资源，按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，确保加载最新的图片资源。

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