本文详解 javascript 中因 dom 元素选择错误导致 `img.src` 为 null 的常见问题，提供精准修复方案，并给出可直接运行的完整代码示例。
在实现“点击缩略图 → 在模态框中显示大图”的交互时，一个典型且隐蔽的错误是：误将事件监听器绑定在 <div> 容器上，却试图读取其 .src 属性——而 <div> 元素本身根本没有 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>：
<div class="project_img"><img src="./images/projects/45.jpg"></div>
此时 document.querySelectorAll(".project_img") 获取的是 div 元素集合，而非 <img> 标签。调用 img.getAttribute("src") 会返回 null，导致模态框图片无法加载。
✅ 正确做法是：将 class="project_img" 移至 <img> 标签本身，确保 JS 选中的是真正的图像元素：
<div class="gallery_box">
<div><img class="project_img" src="./images/projects/46.jpg" alt="Project 46"></div>
<div><img class="project_img" src="./images/projects/45.jpg" alt="Project 45"></div>
<div><img class="project_img" src="./images/projects/44.jpg" alt="Project 44"></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">
<img class="photoBig b_p_modal" alt="Enlarged project image">
</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 现在是 <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 节点类型一致（<img> vs <div>）；
- 使用 console.log(img) 或 img.constructor.name 快速验证选中元素类型；
- 为 <img> 添加 alt 属性提升可访问性；
- 模态框关闭逻辑建议支持点击遮罩层关闭（如上示例），避免仅依赖关闭按钮；
- 若需兼容旧浏览器，可保留 getAttribute("src")，但现代开发中直接访问 img.src 更语义化、性能更优。
此方案无需额外遍历子节点或使用 children[0] 等脆弱路径，结构清晰、健壮性强，是响应式图片预览功能的标准实践。
