如何利用HTML实现图片加载失败的默认占位图显示_通过onerror事件-html教程-PHP中文网

onerror常失效主因是默认图路径错误引发二次错误，需设this.onerror=null并用可靠路径（如data url）；它不检测图片内容损坏，仅响应加载失败；推荐内联svg fallback或多源降级。

如何利用html实现图片加载失败的默认占位图显示_通过onerror事件

图片加载失败时 `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，能彻底规避路径问题，且无需额外请求。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

@@##@@<rect width='\"100\"' height='\"100\"' fill='\"%23eee\"/'><text x='\"50\"' y='\"55\"' font-size='\"12\"' text-anchor='\"middle\"' fill='\"%23999\"'>image</text>'"
     alt="描述文字"></rect>

%23 是 URL 编码的 #，必须转义，否则 SVG 解析失败
实际项目中可压缩 SVG 并去除换行和多余空格，再做 URL 编码
若需响应式，SVG 中用 viewBox 配合 CSS width: 100%，而非固定宽高

现代替代方案：`<picture></picture>` + `srcset` 与 fallback 逻辑

onerror 是应急手段，真正可控的方式是用 <picture></picture> 提前声明多个源，并配合 JS 检测加载状态。但注意：<picture></picture> 本身不提供失败回退机制，仍需结合 onerror。

优先用 <source></source> 指定 WebP/AVIF 等格式，再用 <img src="photo.jpg" onerror="this.onerror=null;this.src='data:image/svg+xml,<svg xmlns=\" http: style="max-width:90%"100\"' height='\"100\"' viewbox='\"0'> 作为最后兜底（但该兜底也会失败）
若业务允许，服务端返回统一的占位图 URL（如 /placeholder?w=300&h=200），比前端硬编码更易维护
对关键图片（如商品主图），建议在 JS 中用 fetch() 预检图片 URL 状态，再决定渲染真实图还是占位图

真正麻烦的是混合场景：CDN 缓存了坏链接、第三方图床突然不可用、用户禁用图片但未关 JS——这些边界情况，onerror 能覆盖的只是其中一部分。别指望一行代码解决所有问题。