本文详解 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 属性]()
