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