本文详解因 dom 元素选择错误导致 `img.src` 为 null 的常见问题，指出误选外层 div 而非 img 标签是根本原因，并提供简洁可靠的修复方案与完整可运行代码。
在实现“点击缩略图，将其图片显示在模态框”这一交互时，一个高频出错点是：JavaScript 中获取到的元素并非 标签本身，而是其父容器（如
），从而导致调用 .src 或 getAttribute('src') 时返回 null —— 因为
元素没有 src 属性。
回顾原始代码：
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 实际指向的是
，而真正的 ![如何通过 JavaScript 将缩略图的 src 属性动态传递到模态框中]()
是它的子元素。因此 img.getAttribute("src") 必然返回 null。方案一（推荐）：将 class 移至
✅ 正确做法是让选择器精准命中 元素。推荐两种方案：
立即学习“Java免费学习笔记（深入）”；
方案一（推荐）：将 class 移至 ![如何通过 JavaScript 将缩略图的 src 属性动态传递到模态框中]()
标签上
修改 HTML，把 class="project_img" 从
移到 ![如何通过 JavaScript 将缩略图的 src 属性动态传递到模态框中]()
：
@@##@@@@##@@@@##@@
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", () => {
modal_img.src = img.src; // ✅ img 是原生 HTMLImageElement，src 可读可写
modal.classList.add("visible");
});
});
close.addEventListener("click", () => {
modal.classList.remove("visible");
});方案二（兼容旧结构）：通过子元素查找
若无法修改 HTML 结构，可在事件处理中显式获取子 
：
project_img.forEach(div => {
const img = div.querySelector("img");
if (img) {
div.addEventListener("click", () => {
modal_img.src = img.src;
modal.classList.add("visible");
});
}
});⚠️ 注意事项：
- 避免在未确保元素存在的情况下直接访问属性（建议加 if (img) 判断）；
- 使用 modal_img.src = img.src 比 setAttribute("src", ...) 更语义清晰且兼容性更好；
- 确保模态框 DOM 在脚本执行前已加载（推荐将 JS 放在
