本文详解因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 获取失败问题，代码更健壮、语义更准确、维护更轻松。
