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