onerror无限重试的根源是备用图加载失败后浏览器仍会重复触发该事件，必须立即执行this.onerror=null切断事件链；正确写法为onerror="this.src='/assets/placeholder.svg'; this.onerror=null;"，推荐用base64内联SVG彻底规避路径风险。
onerror无限重试的根源是备用图也失败
浏览器不会自动阻止 onerror 重复触发——只要新 src 加载失败，事件就再次进入。最常见情况是 fallback 图路径写错、相对路径解析失败、或 CDN 返回 404。此时内存持续增长，页面卡顿甚至崩溃。
关键不是“怎么限制次数”，而是“为什么需要限制”：因为 this.onerror = null 必须在赋值后立刻执行，否则第二次失败时仍会调用原函数。
- 错误写法：
onerror="this.src='fallback.png'"→ 没切断事件，备用图再失败就循环 - 正确写法：
onerror="this.src='/assets/placeholder.svg'; this.onerror=null;"→ 分号不能少，顺序不能颠倒 - 更稳写法：用 base64 内联 SVG，彻底避开路径风险，例如
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAi...
按 URL 路径粒度计数重试次数
对同一张图反复重试 5 次毫无意义，尤其当失败原因是 DNS 故障或 CDN 全局不可用时。真正该控制的是「每个 pathname 的尝试总次数」，而不是全局计数或按 class 匹配。
示例逻辑（需配合 data-retry-key）：
立即学习“前端免费学习笔记（深入）”；
const retryCounts = {};
function handleImgError(img) {
const key = new URL(img.src, location.href).pathname;
retryCounts[key] = (retryCounts[key] || 0) + 1;
if (retryCounts[key] > 3) return;
img.src = '';
img.src = `/cdn-backup${key}?t=${Date.now()}`;
}
- 必须先设
img.src = ''再赋新值，否则浏览器跳过请求 - 用
new URL(..., location.href)标准化路径，避免相对路径、协议差异干扰计数 - 重试 URL 建议加时间戳或随机参数防缓存，但不要用
Math.random()（SSR 不兼容）
动态插入的 ![HTML限制onerror重试次数避免循环]()
怎么安全绑定 onerror
直接 appendChild() 后再绑 onerror 是高危操作：DOM 插入瞬间就可能触发加载失败，事件监听器根本来不及注册。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
两种可靠方式：
- JS 创建时立即绑定：
const img = document.createElement('img'); img.onerror = () => { /* ... */ }; img.src = url; - 全局捕获监听（推荐）：
document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && !e.target.dataset.handled) { e.target.dataset.handled = '1'; /* 降级逻辑 */ } }, true);
true 参数启用捕获阶段，能命中所有后续插入的 ，且
dataset.handled 防止同一张图被多次处理。
为什么不能靠 class 或 DOM 顺序定位重试目标
把重试逻辑塞进一个函数，再靠 document.querySelector('.avatar') 或 imgs[0] 匹配目标，一旦 DOM 结构微调、组件复用或服务端渲染顺序变化，就会重试错元素甚至报错。
唯一可靠方案是资源与重试入口共享唯一标识：
- 给
加
data-retry-key="user-avatar" - 对应按钮也加
data-target="user-avatar" - 点击时用
document.querySelector('[data-retry-key="' + key + '"]')精准定位，不依赖层级、class 或索引
这个绑定关系必须在资源加载前就建立，不能等 onerror 触发后再动态生成按钮——否则用户点不到重试入口。
