如何通过点击缩略图动态加载图片到模态框中

花韻仙語 2026-01-15 00:00:00 次阅读

本文详解 javascript 中因 dom 元素选择错误导致 `img.src` 为 null 的常见问题，提供精准修复方案，并给出可直接运行的完整代码示例。

在实现“点击缩略图 → 在模态框中显示大图”的交互时，一个典型且隐蔽的错误是：误将事件监听器绑定在容器上，却试图读取其 .src 属性——而元素本身根本没有 src 属性，自然返回 null。

回顾原始代码：

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 属性
  });
});

HTML 结构中，.project_img 实际作用于

：
@@##@@
此时 document.querySelectorAll(".project_img") 获取的是 div 元素集合，而非标签。调用 img.getAttribute("src") 会返回 null，导致模态框图片无法加载。

✅ 正确做法是：将 class="project_img" 移至标签本身，确保 JS 选中的是真正的图像元素：
@@##@@ @@##@@ @@##@@
@@##@@
对应 JS 保持简洁高效（推荐使用 src 属性赋值而非 setAttribute）：
const modal = document.querySelector(".modal_section"); const modalImg = document.querySelecto
r(".b_p_modal"); const projectImgs = document.querySelectorAll(".project_img"); const closeBtn = document.querySelector(".modal_close"); // 点击缩略图：获取当前 img 的 src 并填充模态框 projectImgs.forEach(img => { img.addEventListener("click", () => { modalImg.src = img.src; // ✅ img 现在是 @@##@@ 元素，src 可直接访问 modal.classList.add("visible"); }); }); // 关闭模态框 closeBtn.addEventListener("click", () => { modal.classList.remove("visible"); }); // 点击模态框背景区域也可关闭（增强体验） modal.addEventListener("click", (e) => { if (e.target === modal) { modal.classList.remove("visible"); } });
? 关键注意事项：

始终确认 querySelectorAll 选择的目标是否与预期 DOM 节点类型一致（ vs ）；
使用 console.log(img) 或 img.constructor.name 快速验证选中元素类型；

为添加 alt 属性提升可访问性；

模态框关闭逻辑建议支持点击遮罩层关闭（如上示例），避免仅依赖关闭按钮；

若需兼容旧浏览器，可保留 getAttribute("src")，但现代开发中直接访问 img.src 更语义化、性能更优。

此方案无需额外遍历子节点或使用 children[0] 等脆弱路径，结构清晰、健壮性强，是响应式图片预览功能的标准实践。