空 src 不触发 onerror，因其不发起请求；真循环需满足“失败→onerror→新src再失败”链条。排查先查 document.querySelectorAll('img[src=""]').length，再验 Network 中 fallback 图是否反复 404。
空 src 地址不会触发 onerror，所以根本不存在“循环”——你看到的反复替换、卡死或白屏，一定是别的原因在作祟。
为什么空 src 根本不进 onerror
onerror 只响应「浏览器发出了请求但失败」的场景。而 src=""、src=" " 或 src="undefined" 时，浏览器压根不发起 HTTP 请求，事件直接静默跳过。控制台也不会报 404，Network 面板里连记录都没有。
- 检查方式：打开 DevTools → Network → 切换到
img类型，刷新页面，看有没有对应请求发出 - 常见伪装：JS 动态赋值时写了
img.src = data?.avatar || ''，结果data.avatar是null或undefined，最终变成空字符串 - 服务端模板渲染时，变量未定义导致输出了
<img src="" alt="HTML空src地址造成onerror循环如何排查" >，而非跳过整个标签
真正导致 onerror 循环的典型写法
循环只发生在「第一次加载失败 → 触发 onerror → 替换 src → 新 src 再次 404 → 再次触发 onerror」这个链条里。空 src 不在此列，但下面这些写法会。
-
onerror="this.src='fallback.png'"：没加this.onerror=null，一旦fallback.png也 404，立刻无限循环 -
onerror="this.src='./images/placeholder.svg'"：相对路径在子路由下解析错位（比如当前 URL 是/user/profile），实际请求成了/user/images/placeholder.svg→ 404 → 循环 - 动态插入时先
appendChild()再绑定onerror：错误已在插入瞬间发生，事件监听器还没挂上就结束了
如何快速定位是空 src 还是真循环
别猜，用三步现场验证：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 在控制台执行
document.querySelectorAll('img[src=""]').length，结果大于 0 就说明存在空src标签 - 对疑似标签手动触发错误：
const img = document.querySelector('img'); img.src = 'x'; img.src = ''; img.onerror = () => console.log('fired');—— 如果没输出，证明它本来就不会进onerror - 检查 Network 面板中所有
img请求的状态码：全是failed或(blocked)？那是跨域或路径问题；如果某个 fallback 图反复出现 404，才是循环源头
修复建议：堵住源头，别依赖 onerror 补救
空 src 是数据层问题，靠前端兜底只是掩耳盗铃。
- 模板层（如 Vue/React/SSR）：用
v-if="imgUrl" <img :src="imgUrl" alt="HTML空src地址造成onerror循环如何排查" >或{imgUrl && <img src="%7BimgUrl%7D" alt="HTML空src地址造成onerror循环如何排查" >}，彻底避免渲染空src - JS 赋值前校验：
if (url && typeof url === 'string' && url.trim()) { img.src = url; } - 后备方案必须可靠：fallback 图优先用
data:image/svg+xml;base64,...，绝对路径次之，绝不用相对路径拼接 - 需要监控？加一行：
document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && !e.target.src) console.warn('IMG with empty src:', e.target); }, true);
空 src 和 onerror 循环是两类问题，混在一起排查只会延长故障时间。先确认 DOM 里有没有空 src，再盯紧 fallback 图的真实可用性——这两处稳了，大部分“图片不显示”问题就消失了。
