如何在图像单击时动态更改模态的内容

Question

I have the following 3 thumbnail images on an HTML page. When the user clicks on any of these images, I want to show that particular image in a modal.

How can I dynamically pass the image name inside the modal-body, on every image click?

<a href="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
  <img src="images/Picture1.jpg" alt="image not available" onclick=check(this)>
</a>
<a href="images/Picture2.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
  <img src="images/Picture2.jpg" alt="image not available" onclick=check(this)>
</a>
<a href="images/Picture3.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
  <img src="images/Picture3.jpg" alt="image not available" onclick=check(this)>
</a>

Modal

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Image</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img src="images/Picture1.jpg" alt="image not available" id="imagepreview" style="width: 100%; height: 100%;">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Js function which tells, which image is clicked

function check(img) {
  var src = img.src.replace(/^.*[\\\/]/, "");
  console.log(src);
}

Answer 1

You can replace the src attribute of the image in your modal-body with the one of the image which was clicked:

function check(img) {
  document.getElementById("imagepreview").src = img.src;
}