轮播在卡片和模态中具有相同的img

Question

我在两张单独的卡片中创建了一个模态。其中一个模态包含 Card，另一个模态包含 Caousel。在打开的页面上，它显示相同的照片，尽管 src 值不同。我该如何解决？

我更改了所有 img src 值，但出现了相同的照片。

我正在分享代码块的缩短版本并使用 Bootstrap。

Answer 1

两者都写入相同的 id 值。当你把它分开时它就会被修复

myModal1 和 myModal2。

<div class="col">
              <!-- Button trigger modal -->
              <button type="button" class="btn p-0" data-bs-toggle="modal" data-bs-target="#myModal1">
                  <img src="https://picsum.photos/id/341/200/200" class="img-fluid img-thumbnail" alt="">
              </button>
                <!-- Modal -->
                <div class="modal fade" id="myModal1" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="card">
                          <img src="https://picsum.photos/id/341/200/200" class="card-img-top" alt="...">
                          <div class="card-body">
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          </div>
                        </div>
                      </div>
                  </div>
                </div>
          </div>
          <div class="col">
              <!-- Button trigger modal -->
              <button type="button" class="btn p-0" data-bs-toggle="modal" data-bs-target="#myModal2">
                  <img src="https://picsum.photos/id/342/200/200" class="img-fluid img-thumbnail" alt="">
              </button>
                <!-- Modal -->
              <div class="modal fade" id="myModal2" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="card">
                        <img src="https://picsum.photos/id/342/200/200" class="card-img-top" alt="...">
                        <div class="card-body">
                          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        </div>
                      </div>
                  </div>
                </div>
              </div>
          </div>