随笔-图片加载失败图片替换

相对于项目目录下的图片，经常会用到更多是后端传递的网络地址。那么这就可能会造成一种情况：

图片的加载失败，这时候展示的图片就有点不美观，所以可以选择替换目标图片

首先是一个显示加载中的图片：

<img id="test" :src="图片--加载中"/>

然后在js中获取图片路径的时候进行判断能否加载完毕：

/**
 * 检测图片是否存在
 * @param url
 */
let imageIsExist = function(url) {
  return new Promise(resolve => {
    var img = new Image()
    img.onload = function() {
      if (this.complete === true) {
        resolve(true)
        img = null
      }
    }
    // onerror判断是否加载失败
    img.onerror = function() {
      resolve(false)
      img = null
    }
    img.src = url
  })
}

await imageIsExist(imgURL) //调用

如果返回的值是true那么说明图片加载成功，否则的话可以用目录下的加载失败图片路径替换src中的路径防止图片原生的加载失败：

$('#test).attr('src',加载失败图片)

如果是vue的话可以动态绑定src的路径，直接修改。