onerror常失效主因是默认图路径错误引发二次错误，需设this.onerror=null并用可靠路径（如data URL）；它不检测图片内容损坏，仅响应加载失败；推荐内联SVG fallback或<picture>多源降级。
图片加载失败时 onerror 为什么经常不生效
直接在 <img> 上写 onerror="this.src='default.jpg'" 看似简单，但实际常失效——最常见原因是默认图路径也错了，触发二次 onerror，导致无限循环或空白。浏览器不会自动阻止重复错误，必须手动切断。
- 确保默认图路径绝对可靠（推荐使用内联 data URL 或已知存在的 CDN 路径）
- 在
onerror回调里先清空onerror本身：this.onerror = null; - 避免用相对路径，尤其当页面 URL 带查询参数或 hash 时，相对路径容易解析错
onerror 的执行时机与 DOM 状态
onerror 只在资源加载完成且 HTTP 状态非 2xx/3xx、或网络中断、或 MIME 类型不匹配（比如返回 HTML 而不是 image/jpeg）时触发。它**不检测图片内容是否为空白或损坏像素**，也不等 CSS 渲染完成。
- 如果图片被 CSS
display: none隐藏，onerror仍会触发（加载行为不受 visibility 影响） - 服务端返回 404 但响应体是自定义 HTML 页面（而非纯 404），部分浏览器可能不触发
onerror（因“加载成功”但内容非法） - 使用
loading="lazy"时，onerror触发时机不变，但首次滚动进入视口前不会发起请求
更健壮的占位方案：内联 SVG + onerror 降级
比起依赖外部 default.jpg，用 base64 编码的微型 SVG 作为 fallback，能彻底规避路径问题，且无需额外请求。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<img src="photo.jpg"
onerror="this.onerror=null;this.src='data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><rect width=\"100\" height=\"100\" fill=\"%23eee\"/><text x=\"50\" y=\"55\" font-size=\"12\" text-anchor=\"middle\" fill=\"%23999\">image</text></svg>'"
alt="描述文字">
-
%23是 URL 编码的#，必须转义，否则 SVG 解析失败 - 实际项目中可压缩 SVG 并去除换行和多余空格，再做 URL 编码
- 若需响应式，SVG 中用
viewBox配合 CSSwidth: 100%，而非固定宽高
现代替代方案：<picture> + srcset 与 fallback 逻辑
onerror 是应急手段，真正可控的方式是用 <picture> 提前声明多个源，并配合 JS 检测加载状态。但注意：<picture> 本身不提供失败回退机制，仍需结合 onerror。
立即学习“前端免费学习笔记（深入）”；
- 优先用
<source>指定 WebP/AVIF 等格式，再用<img>作为最后兜底（但该兜底也会失败） - 若业务允许，服务端返回统一的占位图 URL（如
/placeholder?w=300&h=200），比前端硬编码更易维护 - 对关键图片（如商品主图），建议在 JS 中用
fetch()预检图片 URL 状态，再决定渲染真实图还是占位图
真正麻烦的是混合场景：CDN 缓存了坏链接、第三方图床突然不可用、用户禁用图片但未关 JS——这些边界情况，onerror 能覆盖的只是其中一部分。别指望一行代码解决所有问题。
