Carousel having the same img inside the Card and Modal

Question

I created a modal in two separate cards. One of the modal has Card in it and the other has Caeousel in it. On the opened pages it shows the same photo although the src value is different. How can I solve it?

I changed all of the img src values but the same photo comes out.

I am sharing a shortened version of the code block and using Bootstrap.

Answer 1

The same id values are written in both. It will be fixed when you separate it as

myModal1 and 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>