onerror一写就卡死是因为fallback图404会触发无限循环，必须写成onerror="this.src='/assets/placeholder.svg'; this.onerror=null;"，先换图再切断事件，且推荐用base64内联SVG防路径失效。
onerror 为什么一写就卡死页面
商品图加载失败后，onerror="this.src='fallback.jpg'" 这种写法极易触发无限循环：fallback.jpg 若也 404，浏览器会再次进入 onerror，反复赋值、重请求，最终内存暴涨甚至标签页崩溃。这不是“偶尔出错”，而是只要 fallback 路径不可靠，就必然发生。
真正起作用的写法只有一种：onerror="this.src='/assets/placeholder.svg'; this.onerror=null;"。分号不能少，顺序不能调——必须先换图，再立刻切断事件绑定。否则第二次错误会被浏览器静默丢弃，你根本看不到占位图，只看到裂图或白屏。
- 绝对路径优先：
/assets/placeholder.svg比./images/fallback.png少一层解析歧义，避免本地双击 HTML 时被当成系统根目录 - SVG 占位图体积小、无渲染失败风险，比 PNG/JPG 更可靠
- 千万别用
onerror="fallback()"这类函数调用——函数未定义时整个事件处理器直接失效，onerror彻底不触发
动态插入的商品图 onerror 绑定时机不对
React/Vue 渲染商品列表、或 JS 懒加载商品图时，常犯一个致命错误：先 appendChild() 再绑定 onerror。此时图片已开始加载，首次错误在绑定前就发生了，onerror 完全捕获不到。
正确做法是：创建 <img alt="HTML商品图片失败引发onerror循环如何处理" > 元素后、插入 DOM 前，就完成事件绑定。例如：
立即学习“前端免费学习笔记（深入）”；
const img = document.createElement('img');
img.src = product.imageUrl;
img.onerror = function() {
if (!this.dataset.fallbacked) {
this.dataset.fallbacked = 'true';
this.src = '/assets/placeholder.svg';
}
};
container.appendChild(img);
- 用
dataset打标比this.onerror = null更可控，尤其适合多次复用同一 fallback 逻辑 - 避免在事件回调里直接写
this.src = '...'后不加防护——动态图可能被反复创建、插入、销毁，状态必须显式标记 - 服务端渲染（SSR）首屏商品图，必须在 HTML 源码里内联
onerror，不能依赖 JS 后续绑定，否则 JS 加载失败时用户就面对一片空白
fallback 图本身又 404 怎么办
90% 的“降级失败”不是代码问题，而是 fallback 图路径错了。比如 CDN 故障、Nginx 未配置 /assets/ 路由、或大小写拼错（Placeholder.svg ≠ placeholder.svg）。一旦 fallback 失败，用户看到的就是纯白区域，且无任何提示。
最彻底的解法是绕过网络请求：用 base64 内联 SVG 占位图。它零请求、零路径风险、体积通常仅 200B 左右：
<img src="https://cdn.example.com/product-123.jpg"
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; this.onerror=null;"
alt="商品主图">
- base64 占位图可直接生成，无需部署；VS Code 插件 “Base64 Preview” 可一键转码
- 若必须用外部 fallback 图，确保其 URL 能在地址栏直接打开，并在 Nginx/Apache 中配置 fallback 响应（如所有
/assets/**请求返回 200 + 占位图） - 不要把
alt当视觉兜底——它只在读屏器或禁用图片时生效，普通用户看到的仍是裂图或白块
为什么 里商品图还是白屏
很多团队改用 <picture></picture> 支持 WebP/AVIF 格式降级，却发现所有 <source></source> 都失败后，页面依然白屏。原因很简单：<picture></picture> 不会“自动 fallback 到 <img alt="HTML商品图片失败引发onerror循环如何处理" >”，它只是渲染最后一个子元素。如果那个 <img src alt="HTML商品图片失败引发onerror循环如何处理" > 本身也 404，结果就是只剩 alt 文字，或者干脆留白。
关键约束：内部 <img alt="HTML商品图片失败引发onerror循环如何处理" > 的 src 必须指向一个高可用地址，不能是相对路径拼错的 ./missing.jpg，也不能是空值或占位图 URL（如 /img/lqip.jpg?product=123），因为后端可能返回 406 或损坏数据。
-
<img alt="HTML商品图片失败引发onerror循环如何处理" >的src必须是静态、无查询参数、能直接在浏览器地址栏打开的 JPEG/PNG/SVG - 格式降级靠
<source type="image/webp"></source>主动选择，不是错误处理；onerror仍要写在内部<img alt="HTML商品图片失败引发onerror循环如何处理" >上，作为最后一道防线 - 不要在
<source></source>上写onerror——它不响应加载失败，也无法通过 JS 修改src
onerror 很容易，但让占位图在任意异常场景下都稳稳出现，需要每一层路径都提前验证可访问性。 
