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