点击图片触发Modal弹窗显示图片失败的问题排查

错误核心原因 #

你代码里的关键问题是获取弹窗图片元素的方式不匹配：

• HTML中弹窗图片仅设置了class="modal-content"，没有对应的id="modal-content"属性
• 但JS里用document.getElementById("modal-content")去获取元素，这会直接返回null，所以执行modalContent.src = image.src时就会抛出Cannot set properties of null的错误

两种修复方案 #

方案1：给弹窗图片添加id #

修改HTML中的弹窗图片标签，补充id属性：

<img src="" alt="Modal image" class="modal-content" id="modal-content">

方案2：修改JS的元素获取逻辑 #

如果不想改动HTML，直接把JS里获取弹窗图片的代码改成通过class选择器获取：

const modalContent = document.querySelector(".modal-content");

修正后的完整JS代码 #

const images = document.querySelectorAll(".grid-image");
const modal = document.getElementById("modal");
const modalContent = document.querySelector(".modal-content");
const closeBtn = document.querySelector(".close");

images.forEach((image) => {
  image.addEventListener("click", () => {
    modal.style.display = "block";
    console.log(image.src)
    modalContent.src = image.src;
  });
});

closeBtn.addEventListener("click", () => {
  modal.style.display = "none";
});

window.addEventListener("click", (event) => {
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

额外补充：你HTML里的图片都加了data-src属性，如果想避免浏览器提前加载大图，也可以用image.dataset.src来获取路径，这更符合懒加载的设计思路，但当前场景下用image.src完全没问题。

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