HTML服务器返回404时onerror循环如何处理-html教程-PHP中文网

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

html服务器返回404时onerror循环如何处理

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>";
}