真正起作用的是「多层 fallback 路径 + 状态隔离 + 渲染前校验」三者缺一不可；onerror仅响应网络请求失败，对空src、cors拦截、200占位图等静默不触发。
图片降级不是加个 onerror 或换种格式就能稳住，真正起作用的是「多层 fallback 路径 + 状态隔离 + 渲染前校验」三者缺一不可。
为什么 onerror 总不触发
onerror 只响应“请求发出后返回非 2xx 状态”或网络中断。以下情况它完全静默：
-
src=""、src=" "、src="broken.jpg"（路径解析失败，根本没发请求） - 跨域图片没加
crossorigin，被 CORS 拦截（控制台报Blocked by CORS policy，但onerror不触发） - 服务器对 404 返回一个占位图（如
/img/missing.png?text=404），HTTP 状态码是 200，浏览器认为“加载成功”
实操建议：
- 必须用内联写法：
onerror="this.onerror=null;this.src='/assets/placeholder.svg'" - 占位图优先用
data:image/svg+xml;base64,内联 SVG，彻底规避路径风险 - 动态创建的
img元素，onerror必须在appendChild()前绑定，否则首次错误捕获不到
<picture></picture> 为什么写了还是白屏
<picture></picture> 是唯一不依赖 JS、原生支持格式协商的降级机制，但它对结构极其敏感。常见失效点：
-
<img>必须写在所有<source></source>之后，且不能自闭合（<img>无效） -
<img src>必须指向一个独立可用资源（推荐 JPG，禁用查询参数），不能复用外部链接或 404 路径 -
<source type="image/webp"></source>对应的服务器响应头必须是Content-Type: image/webp，Nginx 没配types { image/webp webp; }就会静默跳过 - media 条件顺序写错：浏览器从上到下匹配，第一个为 true 就停；应按从宽到窄写，如
media="(min-width: 1200px)"→media="(min-width: 768px) and (max-width: 1199px)"→media="(max-width: 767px)"
loading="lazy" 加了反而白屏
浏览器不支持 loading="lazy" 时，它不会报错，也不会自动读取 data-src——它只是忽略该属性，然后照常加载 src。如果此时 src 是空、占位图路径错误或非法，结果就是白屏。
可靠做法：
-
src必须指向一个可用资源：1px GIF、LQIP 图、或 SSR 渲染出的真实小图；绝不能留空或写src="#" -
data-src必须在 HTML 中静态存在（不能靠 JS 注入），否则断网时 JS 加载失败，data-src就丢了 - 关键图片（如商品主图、头图）跳过懒加载：直接写死
src，不加loading="lazy"，也不设data-src
断网或 JS 被禁用时怎么兜底
当用户禁用 JS、拦截器屏蔽了 CDN 脚本、或离线打开页面，所有基于 JS 的降级都会失效。此时唯一能起作用的是纯 HTML 层的冗余设计：
- 在
<img>外包裹<noscript></noscript>，里面放一个指向本地静态图的<img>：<noscript><img src="/img/local-fallback.jpg" alt=""></noscript> - 服务端渲染（SSR）时，首屏图片的
src应优先使用本地路径，而非等客户端 JS 注入——否则断网即白屏 - 避免把占位图写成
data:image/gif;base64,再通过 JS 替换，base64 本身也是资源，也可能因长度超限或解析失败而不可用
最容易被忽略的点：降级链里任何一环（src、<source></source> 的 MIME 类型、<img> 的 alt、<noscript></noscript> 存在性）出问题，整条链就断在那儿，没有“自动重试”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
