最可靠做法是确保备用图绝对可达、立即执行this.onerror=null切断事件，配合loading="lazy"和data-src双保险；onerror仅对网络请求失败生效，空src、cors拦截或200兜底页等场景需额外校验。
直接用 onerror 属性最简单，但不写对会卡死页面或无限循环；真正可靠的做法是：确保备用图绝对可达 + 立即切断事件绑定 + 配合 loading="lazy" 和 data-src 双保险。
onerror 必须加 this.onerror=null
浏览器对同一张图的 onerror 只触发一次，如果备用图也 404，它不会再次调用——但很多开发者没意识到，错误处理代码本身又触发了新请求，导致内存占用飙升甚至标签页无响应。
- 错误写法：
onerror="this.src='fallback.png'"→ 备用图再失败就静默卡住 - 正确写法：
onerror="this.src='/assets/placeholder.svg'; this.onerror=null;" -
/assets/placeholder.svg必须是绝对路径或已验证可访问的相对路径（如以/或./images/开头） - 优先用
.svg占位图：体积小、无渲染失败风险、天然透明背景
懒加载场景下不能只靠 onerror
当使用 loading="lazy" 时，部分 Safari 版本对 onerror + loading="lazy" 组合支持不稳定；更关键的是，如果 JS 加载失败或被拦截，onerror 根本不会执行——此时图片得靠 HTML 层级兜底。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
src必须始终指向一个真实存在的资源（哪怕只是 1px GIF 或 CSS 渐变背景） -
data-src存高清图地址，且必须在初始 HTML 中静态存在，不能靠 JS 动态注入 - 推荐结构：
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="..."> - 服务端渲染首屏图片时，
src应直接写真实小图 URL，而非留空
动态插入的 img 元素怎么安全绑定 fallback
用 document.createElement('img') 创建后才绑定 onerror，大概率来不及——DOM 插入瞬间就可能触发加载失败，事件监听器还没挂上。
- 稳妥做法：创建时立刻赋值
img.onerror = () => { img.src = '/fallback.svg'; img.onerror = null; }; - 或全局捕获：
document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && !e.target.dataset.handled) { e.target.dataset.handled = '1'; e.target.src = 'data:image/svg+xml;base64,...'; } }, true); -
true参数启用捕获阶段，确保能命中所有后续插入的<img> -
dataset.handled防重复替换，避免多次触发同一张图
真正麻烦的从来不是“怎么放一个灰色方块”，而是当图片尺寸动态变、网络中断、CORS 拦截、或服务器返回 200 状态码的兜底页时，onerror 完全静默失效——这些情况得靠 load 后校验 naturalWidth、预加载默认图、或服务端统一响应策略来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
