点击图片时如何动态修改Modal弹窗内的展示图片内容

方案1：直接修改现有check函数（改动最小） #

你现有的代码已经通过onclick=check(this)拿到了点击的图片元素，只需要在函数内将图片地址赋值给模态框内的预览图片即可，修改后的JS代码如下：

function check(img) {
  // 获取模态框内的预览图片节点
  const previewImg = document.getElementById('imagepreview');
  // 直接将点击的图片地址赋值给预览图
  previewImg.src = img.src;
}

这个方案不需要改动现有HTML结构，只需要调整JS逻辑即可生效。

方案2：使用Bootstrap模态框原生事件（代码更易维护） #

如果不想给每个缩略图重复添加onclick属性，可以借助Bootstrap模态框自带的show.bs.modal事件实现，步骤如下：

1. 给所有缩略图的外层a标签添加统一类名（比如img-thumb），去掉img上的onclick属性，调整后的缩略图代码：

<a href="images/Picture1.jpg" class="img-thumb" data-bs-toggle="modal" data-bs-target="#exampleModal">
  <img src="images/Picture1.jpg" alt="image not available">
</a>
<a href="images/Picture2.jpg" class="img-thumb" data-bs-toggle="modal" data-bs-target="#exampleModal">
  <img src="images/Picture2.jpg" alt="image not available">
</a>
<a href="images/Picture3.jpg" class="img-thumb" data-bs-toggle="modal" data-bs-target="#exampleModal">
  <img src="images/Picture3.jpg" alt="image not available">
</a>

2. 添加模态框事件监听逻辑，无需保留之前的check函数：

const modal = document.getElementById('exampleModal');
// 监听模态框显示事件
modal.addEventListener('show.bs.modal', function (e) {
  // 获取触发当前模态框的元素（即点击的缩略图外层a标签）
  const triggerEl = e.relatedTarget;
  // 取a标签的href属性作为大图地址，也可以取子img的src属性
  const imgSrc = triggerEl.getAttribute('href');
  // 赋值给模态框内的预览图
  modal.querySelector('#imagepreview').src = imgSrc;
});

这个方案后续新增缩略图时，只需要按照规则添加带img-thumb类的a标签即可，无需额外添加事件属性，维护成本更低。

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