img标签onerror事件在循环中只触发一次，是因为浏览器缓存了相同src的加载失败状态，后续不再检测；框架中需用事件处理器而非内联属性，避免this指向错误和闭包问题。
img标签onerror事件在循环中为什么只触发一次
因为onerror是 DOM 事件，不是模板逻辑；循环渲染时若多个img共用同一张失败图片（比如默认占位图路径写死），浏览器会缓存该资源加载失败状态，后续相同src的img不再触发onerror——你看到“只执行一次”，其实是浏览器跳过了重复错误检测。
Vue/React里直接写onerror="this.src='...'"会报错
在现代框架中，onerror属性里的this指向不是当前元素（尤其 JSX 或 template 编译后），容易报Cannot set property 'src' of undefined。正确做法是用内联函数或绑定事件处理器：
- Vue 模板：
@error="handleImageError($event, item)"，然后在方法里用$event.target.src = fallbackUrl - React JSX：
onError={(e) => { e.target.src = fallbackUrl }}，注意别写成onError={e => e.target.src = ...}（少括号会导致返回值干扰渲染） - 纯 HTML + JS 循环生成时：确保每个
img的onerror函数作用域能访问到对应fallback变量，避免闭包捕获最后一个值
for循环动态创建img时onerror失效的典型写法
下面这段代码看似合理，实则所有img出错后都换成最后一项的fallback：
const urls = ['a.jpg', 'b.jpg', 'c.jpg'];
const fallbacks = ['a.png', 'b.png', 'c.png'];
for (let i = 0; i < urls.length; i++) {
const img = document.createElement('img');
img.src = urls[i];
img.onerror = () => { img.src = fallbacks[i] }; // ❌ i 已变为3，fallbacks[3] === undefined
container.append(img);
}
修复方式只有两个可靠选择：
立即学习“前端免费学习笔记（深入）”；
- 用
let声明i（ES6 块级作用域保证每次循环独立） - 改用
forEach：urls.forEach((url, i) => { ... img.onerror = () => img.src = fallbacks[i] }) - 或者把
fallback存在dataset里：img.dataset.fallback = fallbacks[i]，onerror里读e.target.dataset.fallback
更健壮的统一处理：用Event Delegation代替逐个绑定
如果页面图片多、动态增删频繁，不建议每个img都绑onerror。监听父容器的error事件更轻量：
container.addEventListener('error', (e) => {
if (e.target.tagName === 'IMG' && !e.target.src.includes('fallback')) {
e.target.src = '/images/default.png';
}
});
注意点：
- 必须加判断避免 fallback 图片再次触发（否则无限循环）
- 不能用
img自身作为委托目标（error不冒泡，但img父元素可以捕获） - 该方式无法区分不同图片的专属 fallback，适合全局兜底
onerror就不可靠了，得提前校验或服务端兜底。 
