动态更新图片src时onerror仅生效一次 加载失败显示备份图问题咨询

问题根因 #

你原代码里的this.onerror=null逻辑会在第一次触发错误后直接清空img元素的错误处理回调，后续你通过脚本更新图片src时，元素已经没有对应的错误处理逻辑了，自然不会再触发备用图替换逻辑。

解决方案 #

以下是几个可直接落地的实现方式，按需选择即可： #

方案1：修改行内onerror逻辑，移除null赋值，增加循环判断 #

不要直接清空onerror，而是加一层判断：只有当前加载失败的地址不是备用图地址时才替换，避免备用图加载失败导致死循环。
行内写法示例：

<img src="目标图片地址" onerror="if(this.src !== '你的备用图全路径地址') this.src = '你的备用图全路径地址'">

注意这里要填备用图的全路径（带域名的完整地址），因为this.src读取的是浏览器解析后的完整路径，如果你填相对路径会出现匹配失败的问题 #

方案2：使用addEventListener绑定错误事件，适合JS动态操作的场景 #

如果你的图片是动态生成、或者频繁修改src的，更推荐用JS统一绑定错误处理，不用写行内属性：

// 可通过选择器批量选中需要处理的img元素
const img = document.querySelector('#your-img')
// 绑定错误处理事件，只要不手动移除就会一直生效
img.addEventListener('error', function() {
  const fallbackUrl = '你的备用图地址'
  if (this.src !== fallbackUrl) {
    this.src = fallbackUrl
  }
})

// 后续动态修改src时，错误处理逻辑会自动触发
img.src = '新的图片地址'

方案3：保留原行内清空逻辑，每次更新src时重新绑定回调 #

如果你不想改动原有逻辑，那每次用JS修改完图片src后，重新给元素的onerror属性赋值一次即可：

const img = document.querySelector('#your-img')
// 更新src
img.src = '新的图片地址'
// 重新绑定onerror逻辑
img.onerror = function() {
  this.onerror = null
  this.src = '你的备用图地址'
}

内容的提问来源于stack exchange，提问作者vvhitearmor