如何通过 JavaScript 将缩略图的 src 属性动态传递到模态框中

心靈之曲 2026-01-15 00:00:00 次阅读

本文详解因 dom 元素选择错误导致 `img.src` 为 null 的常见问题，指出误选外层 div 而非 img 标签是根本原因，并提供简洁可靠的修复方案与完整可运行代码。

在实现“点击缩略图，将其图片显示在模态框”这一交互时，一个高频出错点是：JavaScript 中获取到的元素并非标签本身，而是其父容器（如

），从而导致调用 .src 或 getAttribute('src') 时返回 null —— 因为元素没有 src 属性。

回顾原始代码：

const project_img = document.querySelectorAll(".project_img");
project_img.forEach((img) => {
  img.addEventListener("click", function () {
    modal_img.setAttribute("src", img.getAttribute("src")); // ❌ img 是 div，无 src 属性
  });
});

此处 img 实际指向的是

，而真正的是它的子元素。因此 img.getAttribute("src") 必然返回 null。

✅ 正确做法是让选择器精准命中元素。推荐两种方案：

方案一（推荐）：将 class 移至标签上

修改 HTML，把 class="project_img" 从

移到：

@@##@@ @@##@@ @

@##@@

JS 保持不变即可正常工作：

const modal = document.querySelector(".modal_section");
const modal_img = document.querySelector(".b_p_modal");
const project_img = document.querySelectorAll(".project_img"); // ✅ 现在选中的是 img 元素
const close = document.querySelector(".modal_close");

project_img.forEach(img => {
  img.addEventListener("click", () => {
    modal_img.src = img.src; // ✅ img 是原生 HTMLImageElement，src 可读可写
    modal.classList.add("visible");
  });
});

close.addEventListener("click", () => {
  modal.classList.remove("visible");
});

方案二（兼容旧结构）：通过子元素查找

若无法修改 HTML 结构，可在事件处理中显式获取子：

project_img.forEach(div => {
  const img = div.querySelector("img");
  if (img) {
    div.addEventListener("click", () => {
      modal_img.src = img.src;
      modal.classList.add("visible");
    });
  }
});

⚠️ 注意事项：