本文详解 javascript 中因 dom 元素选择错误导致 `img.src` 为 null 的常见问题，提供精准的修复方案，并给出可直接运行的完整代码示例。
在实现“点击缩略图 → 在模态框中显示大图”功能时，一个高频出错点是：误将事件监听器绑定在包裹 回顾原始代码： HTML 结构中： .project_img 实际作用于 ✅ 正确做法是：让 project_img 选择器精准匹配 修改 HTML，把 class="project_img" 从 JS 保持不变即可正确工作： 若无法修改 HTML，可在 JS 中显式查找子 以上方案已通过现代浏览器验证，可稳定运行。核心原则始终是：选择器必须精确匹配你真正需要操作的 DOM 节点类型。 相关文章 如何用javascript操作dom_哪种方法性能更优 如何实现 CSS 渐变背景的无缝循环动画 如何实现 CSS 渐变动画的无缝循环播放 如何为菜单按钮动态激活对应彩色状态框（CSS变量 + data属性方案） 如何为菜单按钮动态关联不同颜色的激活状态指示器 相关标签: 本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn 热门AI工具 的
const project_img = document.querySelectorAll(".project_img");
// 此处 .project_img 匹配的是 元素本身。推荐两种简洁可靠的方案：
✅ 方案一（推荐）：将 class 移至
标签：
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");
});✅ 方案二（兼容旧结构）：在事件中定位子元素
：
project_img.forEach(div => {
div.addEventListener("click", () => {
const imgEl = div.querySelector("img");
if (imgEl && imgEl.src) {
modal_img.src = imgEl.src;
modal.classList.add("visible");
}
});
});⚠️ 注意事项
添加 loading="lazy" 和 alt 属性以提升可访问性与性能；
