Vue.js中动态加载图片时img.onload事件未触发该如何解决

• 资源路径配置问题
  你当前使用的相对路径../Image.jpg不符合Vue的资源打包规则，开发环境和打包后的资源路径会发生变化，相对路径大概率无法定位到正确的图片资源。你可以选择两种方案修正：

  1. 把图片放到项目public目录下，引用时直接用绝对路径，比如img.src = '/Image.jpg'
  2. 用require引入本地资源，让Vue自动处理打包后的路径：img.src = require('../Image.jpg')

• 缺少缓存场景兜底逻辑
  如果图片已经被浏览器缓存，部分低版本浏览器不会重复触发onload事件，可以补充complete状态判断提前执行回调：

display () {
  var img = new Image()
  const loadHandler = () => {
    console.log('Loaded')
  }
  img.onload = loadHandler
  // 缓存命中时直接执行回调
  if (img.complete) loadHandler()
  img.src = require('../Image.jpg')
}

• 局部变量被垃圾回收
  你在方法内定义的img是局部变量，方法执行完成后如果没有其他引用，img实例会被JS垃圾回收机制提前销毁，导致onload回调无法触发，把img挂载到Vue实例上即可解决：

display () {
  // 挂载到实例属性避免被回收
  this.tempImg = new Image()
  this.tempImg.onload = () => {
    console.log('Loaded')
  }
  // 补充onerror回调排查加载失败问题
  this.tempImg.onerror = (e) => {
    console.log('图片加载失败', e)
  }
  this.tempImg.src = require('../Image.jpg')
}

• 跨域加载限制
  如果引用的是外部域名的图片，对方服务没有配置允许跨域的响应头，图片会加载失败，也不会触发onload回调，补充上面的onerror回调即可快速定位这类问题。

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