HTML图片降级本身不触发JS报错，但404错误和静默失效（如白屏）更需防范；onerror无法阻止浏览器发起请求，src必须指向真实资源，动态img需提前绑定onerror，结构错误会导致退化为文本或空白，内联onerror配合data URI可实现可控失败处理。
HTML图片降级本身不会触发JavaScript报错，但常见“页面报错”实际是控制台出现 Failed to load resource: the server responded with a status of 404 (Not Found) 或类似网络错误；更隐蔽的是因结构/属性写错导致的静默失效（比如白屏却无报错）。真正要防的不是“报错”，而是“不可见 + 不可控”。
为什么 onerror 绑定后控制台还刷 404？
因为 onerror 是事件处理器，只响应“请求发出后失败”，不阻止浏览器先发一次请求。只要 src 指向一个不存在的路径，浏览器就会尝试加载并记录 404 —— 这和 onerror 是否存在、是否生效完全无关。
-
src必须指向一个真实可访问的资源：哪怕只是 1px GIF（src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="）或 CDN 托管的占位图 - 禁止用空值：
src=""、src="#"、src="broken.jpg"（且该文件实际不存在）都会触发 404 - 动态生成的
img元素，onerror必须在appendChild()前绑定，否则首次加载失败无法捕获
<picture></picture> 写错结构会导致什么“错误”？
浏览器不会报语法错误，但会退化成纯文本或空白——这是比 404 更危险的“静默错误”。典型错误包括：
- 漏掉末尾的
<img>标签：整个<picture></picture>不渲染任何内容，仅保留alt文本（如果写了） -
<source></source>没写type属性（如type="image/webp"）：Safari 直接跳过，不尝试加载，也不 fallback -
<img>的src是相对路径错误（如src="./images/logo.jpg"），而 HTML 文件部署在子路由下，路径解析失败 → 白屏 + 404 - 多个
<source></source>都不满足条件（media全不匹配 +type全不支持），最终仍会尝试加载<img>的src；若这个src也失效，就只剩alt
如何让图片加载失败时不刷控制台、也不留白？
核心是把“失败”变成“可控状态切换”，而不是依赖浏览器默认行为。关键动作必须内联、静态、无 JS 依赖：
- 用内联
onerror并立即切断链：onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSIjZGRkIi8+PC9zdmc+'; this.onerror=null;" - 所有占位图优先用
data:URI 内联，彻底规避路径问题和额外请求 - 不要用
document.addEventListener('error')监听图片错误：它不冒泡，无法捕获img的error事件 - 开发阶段快速定位：运行
Array.from(document.images).filter(i => i.naturalWidth === 0)，直接列出所有未加载成功的img
最容易被忽略的一点：服务端返回 200 状态码的“占位图”（比如 Nginx 配置了 try_files $uri /placeholder.png）会让 onerror 完全静默触发——浏览器认为“加载成功”，但用户看到的是错误提示图。这种场景下，必须靠服务端协商（如 Accept header）或客户端预校验（new Image().src = url）来兜底，不能只信 HTTP 状态码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
