onerror替换src后必须立刻执行this.onerror=null以防无限循环；可靠写法为onerror="this.src='default.png'; this.onerror=null;"，需用绝对路径或base64确保fallback图可访问，且alt必须语义化描述按钮功能。
onerror替换src后必须立刻切断事件
图片按钮（即带onclick的<img>）加载失败时，只写onerror="this.src='default.png'"大概率会卡死或白屏——因为备用图再失败，onerror会重复触发，形成无限循环。浏览器不会自动阻止，必须手动截断。
可靠写法只有这一种：onerror="this.src='default.png'; this.onerror=null;"。注意两点：分号不能少；this.onerror=null必须紧接在赋值之后，顺序不能颠倒。
- 默认图路径建议用绝对 URL 或 base64 data URL，避免相对路径在不同路由下解析错
- 如果按钮需支持点击，确保
default.png本身可访问——它挂了就真没退路了 - 别用
javascript:void(0)之类无效src初始化，那根本不会触发onerror，alt 也出不来
alt不是备选方案，是强制语义要求
alt属性不解决“显示什么”，而是定义“这张图是什么”。对图片按钮来说，它必须描述行为意图，比如alt="删除此项"、alt="展开详情"，而不是“图标”或空字符串。
很多人以为alt是加载失败才起作用，其实只要用了<img>标签，alt就必须存在且有意义。否则屏幕阅读器跳过、SEO 权重归零、部分浏览器甚至拒绝渲染。
- 装饰性按钮（如纯样式分隔符）才用
alt=""，但这种情况极少出现在按钮场景 -
title是悬停提示，移动端无效，不能替代alt - 如果按钮文字已用
<span></span>包裹，alt仍要保留功能描述，不可省略
动态插入的图片按钮怎么统一处理
用 JS 动态创建的图片按钮，内联onerror容易漏绑或来不及生效。更稳的方式是捕获阶段全局监听：
document.addEventListener('error', e => {
if (e.target.tagName === 'IMG' && e.target.hasAttribute('data-button')) {
if (!e.target.dataset.handled) {
e.target.dataset.handled = '1';
e.target.src = '/static/icons/button-fallback.svg';
}
}
}, true);
关键点：true参数表示捕获阶段，能命中所有<img>，包括后续appendChild插入的；dataset.handled防重复替换；data-button用于精准过滤按钮类图片，避免误改广告图或头像。
- 不要用
document.querySelectorAll('img[data-button]').forEach()遍历绑定——新插入的节点不会被覆盖 - fallback 图建议用内联 SVG（base64 或直接嵌入），彻底避开路径问题
- 如果按钮有 hover/active 状态，记得 fallback 图也要适配对应 CSS 类名
框架里别直接操作 src，小心破坏响应式更新
Vue 或 React 中，给图片按钮写@error="imgUrl = defaultUrl"或onError={() => img.src = default}看似简单，实则危险：可能绕过响应式系统，导致下次数据更新时 fallback 图被意外覆盖，或引发无限 re-render。
Vue 推荐用@error.once + ref安全赋值：<img :src="url" ref="btnImg">，方法里用this.$nextTick(() => this.$refs.btnImg.src = default)；React 则必须校验当前src是否已是 fallback：onError={(e) => { if (e.target.src !== defaultUrl) e.target.src = defaultUrl; }}。
- 提前预加载 fallback 图：
new Image().src = defaultUrl，避免换图时白屏 - 服务端返回 404 HTML 页面（而非纯 404 响应体）时，
onerror可能不触发——这时只能靠监控上报+人工排查 - 真正难的是 fallback 后的 fallback：默认图也挂了，要不要切 base64？要不要上报？这些逻辑线上常被跳过，结果就是静默白屏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
