onerror 无限循环本质是 fallback 资源本身 404，导致“加载→失败→再加载”死链；必须写成 onerror="this.src='/fallback.svg'; this.onerror=null;" 切断事件，且 fallback 用绝对路径或 base64 避开解析歧义。

onerror 循环本质是 fallback 资源本身也 404，浏览器反复加载失败后静默抑制事件，不是代码没生效，而是降级路径不可达。

为什么 onerror="this.src='fallback.jpg'" 会无限循环

最常见场景：主图 src="logo.webp" 404 → 触发 onerror → 改为 this.src='fallback.jpg' → 但 fallback.jpg 路径错误或权限不足，也返回 404 → 再次触发 onerror → 重复赋值，CPU 占用飙升，页面卡死。

• 浏览器对连续同元素的 src 变更有保护机制，第二次起可能直接丢弃事件，不报错也不提示
• 相对路径（如 "./img/fallback.jpg"）在不同路由层级下解析结果不同，本地能开，上线必 404
• 动态拼接的路径含中文、空格或特殊字符，未 encodeURI，服务端拒绝解码导致 404

必须写成 onerror="this.src='/fallback.svg'; this.onerror=null;"

切断事件绑定是硬性要求，缺一不可。否则只要 fallback 图不可达，就会陷入“加载→失败→再加载→再失败”的死链。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• this.onerror=null 必须紧接在 this.src=... 后面，不能换行或拆到 JS 文件里
• 备用图优先用绝对路径（/fallback.svg）或 base64（data:image/svg+xml;base64,...），避开路径解析歧义
• 避免用 .jpg 或 .png 做 fallback——它们体积大、易损；SVG 占位图轻量、抗缩放、自带容错性
• 如果 fallback 图需带文字（如 “Logo 404”），直接用内联 SVG 的 <text></text> 元素，不依赖外部字体文件

服务端配合：Nginx 返回带文字的占位图

比前端硬编码 fallback 更可靠的方式，是让服务器接管——所有未命中图片请求，统一返回一个语义化占位图，状态码仍为 404，但内容可读。

立即学习“前端免费学习笔记（深入）”；

• Nginx 配置示例：

  location ~* \.(jpg|jpeg|png|webp|avif)$ {
    try_files $uri @placeholder;
  }
  location @placeholder {
    return 404 "data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 200 100'><text x='10' y='50' font-size='14' fill='gray'>404: $uri</text></svg>";
  }

• 这样即使 HTML 里没写 onerror，用户也能看到明确提示；写了 onerror 时，fallback 图本身也不会再 404
• 注意 return 指令中必须用双引号包裹 data URI，且 $uri 会被自动注入原始请求路径，方便定位问题

真正难的不是写对那行 onerror，而是确保 fallback 路径在任意部署环境（本地开发、CI 构建、CDN 回源、多级反向代理）下都真实可达——这要求路径要么绝对、要么自包含，不能依赖运行时上下文猜。