本文详解 javascript 中因 dom 元素选择错误导致 `img.src` 为 null 的常见问题，提供精准修复方案，并给出可直接运行的完整代码示例。
在实现“点击缩略图 → 在模态框中显示大图”的交互时，一个典型且隐蔽的错误是：误将事件监听器绑定在 回顾原始代码： HTML 结构中，.project_img 实际作用于 此时 document.querySelectorAll(".project_img") 获取的是 div 元素集合，而非 ✅ 正确做法是：将 class="project_img" 移至 对应 JS 保持简洁高效（推荐使用 src 属性赋值而非 setAttribute）： ? 关键注意事项： 此方案无需额外遍历子节点或使用 children[0] 等脆弱路径，结构清晰、健壮性强，是响应式图片预览功能的标准实践。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.getAttribute("src") 会返回 null，导致模态框图片无法加载。 标签本身，确保 JS 选中的是真正的图像元素：
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");
}
}); vs
添加 alt 属性提升可访问性； 
