本文详解因 dom 元素选择错误导致 `img.src` 为 null 的常见问题，指出误选外层 div 而非 img 标签是根本原因，并提供简洁可靠的修复方案与完整可运行代码。
在实现“点击缩略图，将其图片显示在模态框”这一交互时，一个高频出错点是：JavaScript 中获取到的元素并非 <img> 标签本身，而是其父容器（如 <div class="project_img">），从而导致调用 .src 或 getAttribute('src') 时返回 null —— 因为 <div> 元素没有 src 属性。
回顾原始代码：
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 属性
});
});此处 img 实际指向的是 <div class="project_img">，而真正的 <img> 是它的子元素。因此 img.getAttribute("src") 必然返回 null。
✅ 正确做法是让选择器精准命中 <img> 元素。推荐两种方案：
立即学习“Java免费学习笔记（深入）”；
方案一（推荐）：将 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");
});方案二（兼容旧结构）：通过子元素查找
若无法修改 HTML 结构，可在事件处理中显式获取子 <img>：
project_img.forEach(div => {
const img = div.querySelector("img");
if (img) {
div.addEventListener("click", () => {
modal_img.src = img.src;
modal.classList.add("visible");
});
}
});⚠️ 注意事项：
- 避免在未确保元素存在的情况下直接访问属性（建议加 if (img) 判断）；
- 使用 modal_img.src = img.src 比 setAttribute("src", ...) 更语义清晰且兼容性更好；
- 确保模态框 DOM 在脚本执行前已加载（推荐将 JS 放在 </body> 前，或使用 DOMContentLoaded 事件）。
通过精准选择目标元素，即可彻底解决 img.src 为 null 的问题，实现流畅的图片预览交互。
