本文详解 javascript 中因 dom 元素选择错误导致 `img.src` 为 NULL 的常见问题，提供精准的修复方案，并给出可直接运行的完整代码示例。
在实现“点击缩略图 → 在模态框中显示大图”功能时，一个高频出错点是：误将事件监听器绑定在包裹 的
上，却试图直接读取该
的 .src 属性——而
元素本身根本没有 src 属性，自然返回 null。
回顾原始代码：
const project_img = document.querySelectorAll(".project_img"); // 此处 .project_img 匹配的是 ，而非其内部的 @@##@@ project_img.forEach((img) => { img.addEventListener("click", function () { modal_img.setAttribute("src", img.getAttribute("src")); // ❌ img 是 div，无 src 属性 }); });
html 结构中：
@@##@@
.project_img 实际作用于
，因此 img 变量指向的是
元素，调用 img.getAttribute(“src”) 或 img.src 均返回 null。
✅ 正确做法是：让 project_img 选择器精准匹配 ![如何通过点击缩略图动态设置模态框中图片的 src 属性]()
元素本身。推荐两种简洁可靠的方案：
✅ 方案一（推荐）：将 class 移至 
标签
修改 HTML，把 class=”project_img” 从
移到 ![如何通过点击缩略图动态设置模态框中图片的 src 属性]()
：
@@##@@ @@##@@ @@##@@
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"); });
✅ 方案二（兼容旧结构）：在事件中定位子元素 ![如何通过点击缩略图动态设置模态框中图片的 src 属性]()
若无法修改 HTML，可在 JS 中显式查找子 ![如何通过点击缩略图动态设置模态框中图片的 src 属性]()
：
project_img.forEach(div => { div.addEventListener("click", () => { const imgEl = div.querySelector("img"); if (imgEl && imgEl.src) { modal_img.src = imgEl.src; modal.classList.add("visible"); } }); });
⚠️ 注意事项
- 使用 modal_img.src = img.src 比 setAttribute(“src”, …) 更语义清晰且兼容性更好；
- 确保模态框初始为隐藏状态（如 css 中 .modal_section { display: none; } 或 opacity: 0; visibility: hidden;），再通过 visible 类控制显示；
- 建议为
添加 loading=”lazy” 和 alt 属性以提升可访问性与性能；
- 若图片路径为相对路径，需确保模态框中加载时上下文路径一致（通常无影响，但 SSR 或复杂路由下需注意）。
以上方案已通过现代浏览器验证，可稳定运行。核心原则始终是：选择器必须精确匹配你真正需要操作的 DOM 节点类型。
![如何通过点击缩略图动态设置模态框中图片的 src 属性]()
![如何通过点击缩略图动态设置模态框中图片的 src 属性]()
![如何通过点击缩略图动态设置模态框中图片的 src 属性]()