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

花韻仙語

发布时间：2026-01-15 23:07:02

919人浏览过

来源于php中文网

原创

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

本文详解 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 实际作用于

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

✅ 正确做法是：将 class="project_img" 移至标签本身，确保 JS 选中的是真正的图像元素：

AI Undetect
让AI无法察觉，让文字更人性化，为文字体验创造无限可能。

下载

<div class="gallery_box"> <div>@@##@@</div> <div>@@##@@</div> <div>@@##@@</div> </div> <section class="modal_section"> <div class="photo_area_modal"> <button class="modal_close"><span class="close_span">×</span></button> <div class="photo_big_modal"> @@##@@ </div> </div> </section>
对应 JS 保持简洁高效（推荐使用 src 属性赋值而非 setAttribute）：
const modal = document.querySelector(".modal_section"); const modalImg = document.querySelector(".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] 等脆弱路径，结构清晰、健壮性强，是响应式图片预览功能的标准实践。