动态创建的 应用 img.onerror = function(e) { e.target.src = e.target.dataset.fallback || '/default.jpg'; } 显式绑定，避免 onerror 字符串写法；注意 this 指向 window，须用 e.target；Vue/React 优先用框架语法（如 @error、onError）；确保 src 赋值在元素挂载后，并校验空值与缓存问题。
动态创建的 ![]()
onerror？
直接在字符串拼接 HTML 里写 onerror="..." 看似简单，但容易出错：函数未定义、this 指向混乱、作用域丢失。更稳妥的方式是创建元素后，用 JS 显式绑定事件处理函数。
- 别用
innerHTML += '——'
handleImgError在全局作用域外就找不到 - 用
document.createElement('img')创建节点，再用.onerror = function() {...}或.addEventListener('error', ...) - 如果循环中要传参（比如 fallback URL 或日志 ID），推荐闭包或
dataset存储：img.dataset.fallback = '/placeholder.jpg'
onerror 回调里为什么拿不到 this.src？
因为默认情况下，onerror 触发时 this 是 window，不是出错的 onclick 不同，是历史遗留行为。
- 正确做法：用事件参数
event.target，它始终指向触发事件的元素 - 错误写法：
onerror="this.src='fallback.jpg'"—— 这里的this是window，会报Cannot assign to read only property 'src' - 安全写法：
img.onerror = function(e) { e.target.src = e.target.dataset.fallback || '/default.jpg'; };
Vue/React 里要不要手动绑 onerror？
不用硬写原生事件绑定。框架有自己的响应式机制和生命周期，强行混用原生 onerror 容易破坏更新逻辑或造成内存泄漏。
- Vue：用
@error指令 + 方法，或v-bind:onerror绑定内联函数（注意避免每次渲染都新建函数） - React：用
onError事件属性（注意首字母大写），配合useState更新src；别在useEffect里反复查 DOM 绑事件 - 共同陷阱：在列表渲染中，把错误处理逻辑写在循环外部但没做防抖或节流，图片批量 404 时可能触发大量重绘
为什么 onerror 有时不触发？
常见原因不是代码写错，而是资源加载流程被干扰或条件不满足。
- 图片地址是空字符串、
data:URI 或blob:且内容无效时，部分浏览器不触发error事件 - 已缓存的 404 响应（比如服务器返回 404 但带了
Cache-Control: public），后续请求可能直接走缓存，不再触发onerror - 图片还没插入 DOM 就设置
src（比如先el.src = url再parent.appendChild(el)），某些浏览器会跳过错误检测 - 解决办法：确保
src赋值发生在元素挂载之后；对空值/非法 URI 提前校验；必要时加时间戳或随机查询参数破缓存
关键点在于：动态节点的 onerror 不是“加个属性”就完事，它依赖正确的创建顺序、事件上下文、以及对浏览器加载行为的理解。漏掉任意一环，都会让 fallback 图片静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
