forEach 循环在 JS 中只从我的画廊中选择一张图片？

Question

我有一个带有一些 JavaScript 的图片库，只要您单击放大镜图标，它就会以更大的格式显示图片库中的特定图像。

按钮本身似乎工作正常，但它似乎只从图库中选择相同的图像，而不是被点击的特定图像。

HTML：

function getPics() {}
const imgs = document.querySelectorAll('.card img');
const fullPage = document.querySelector('#full-page');
const imagePage = document.querySelector('#image-page');
const glasses = document.querySelectorAll('.card .mglass i');

glasses.forEach(i => {
  i.addEventListener('click', function() {
    imgs.forEach(img => {
      imagePage.style.backgroundImage = 'url(' + img.src + ')';
      fullPage.style.display = 'block';
    });
  });
});

<div id="full-page" onclick="this.style.display='none'">
  <div id="image-page"></div>
</div>

<div class="grid-container">

  <div id="grid" class="dog-grid">
    <div class="card stack">
      <img src="Images/Galerij/IMG_7877.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
    <div class="card stack">
      <img src="Images/Galerij/IMG_7945.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
    <div class="card stack third-edit">
      <img src="Images/Galerij/IMG_7983.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
    <div class="card stack">
      <img src="Images/Galerij/IMG_8038.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
    <div class="card stack fifth-edit">
      <img src="Images/Galerij/IMG_8066.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
    <div class="card stack">
      <img src="Images/Galerij/IMG_8094.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
    <div class="card stack">
      <img src="Images/Galerij/IMG_8114.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
    <div class="card stack eight-edit">
      <img src="Images/Galerij/IMG_8124.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
  </div>

每当我尝试使用必须单击的图像本身时，它都可以正常工作。 我觉得这可能是因为“img”没有使用按钮方法触发的事件。

如果是这样的话，我该怎么办？