本文详解因 DOM 元素选择错误导致 img.src 为 null 的问题，通过修正 HTML 结构与 JS 选择器，实现点击缩略图后将其图片地址准确传递至模态框中的功能。
本文详解因 dom 元素选择错误导致 `img.src` 为 null 的问题，通过修正 html 结构与 js 选择器，实现点击缩略图后将其图片地址准确传递至模态框中的功能。
在前端开发中，实现“点击缩略图 → 在模态框中展示高清大图”是一个常见需求。但许多开发者会遇到 modal_img.src = img.src 报错或赋值为 null 的问题——这通常并非逻辑错误，而是DOM 选择偏差所致。
? 问题根源：选错了目标元素
观察原始 HTML：
<div class="project_img"> <img src="./images/projects/45.jpg"> </div>此处 .project_img 是 <div> 的类名，而 <img> 标签本身 没有类名。但 JavaScript 中却这样查询：
const project_img = document.querySelectorAll(".project_img"); // → 获取的是所有 <div class="project_img"> 元素，不是 <img>！因此 img.src 实际是在尝试读取 <div> 元素的 src 属性——而 <div> 原生不支持 src，结果自然为 undefined 或 null。
立即学习“Java 免费学习笔记（深入）”；
✅ 正确解法：让选择器精准指向 <img>
推荐方案（语义清晰、代码简洁）：
将 class=”project_img” 移至 <img> 标签上，并保持 JS 不变：
<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", function () {modal_img.src = this.src; // ✅ this 指向被点击的 <img>，src 可安全访问 modal.classList.add("visible"); }); }); close.addEventListener("click", () => {modal.classList.remove("visible"); });? 小技巧：使用 this.src 比 img.getAttribute(“src”) 更简洁可靠；现代浏览器中，原生 src 属性会自动解析为完整 URL（含协议和域名），而 getAttribute(“src”) 仅返回相对路径字符串。
⚠️ 注意事项与增强建议
-
避免事件委托陷阱：若缩略图是动态插入的，querySelectorAll 不会捕获后续新增节点。此时应改用事件委托：
document.querySelector(".gallery_box").addEventListener("click", (e) => {if (e.target.matches(".project_img")) {modal_img.src = e.target.src; modal.classList.add("visible"); } }); -
图片加载优化：为防止空白闪烁，可在设置 src 后监听 load 事件再显示模态框：
modal_img.onload = () => modal.classList.add("visible"); modal_img.src = this.src; -
无障碍支持：为缩略图添加 role=”button” 和 tabindex=”0″，并绑定 keydown 事件（如 Enter/Space 键触发），提升键盘可访问性。
✅ 总结
核心原则始终是：JS 选择器必须与 HTML 结构严格匹配。当遇到“属性为 null”时，优先检查 console.log(img) 输出的是否为你预期的元素类型。本例中，只需将类名从容器 <div> 迁移至 <img> 标签，即可一劳永逸解决 src 获取失败问题，代码更健壮、语义更准确、维护更轻松。
