图片加载失败？别急 有办法

项目做完了发布到服务器总是面临各种各样的问题 比如下面这样 图片找不到

• 不怎么好看

• 可以使用img标签自带的事件 onerror

  // https://xxx.png 替换默认图片地址
  <img class="good-img" :src="imgUrl" @error="() => imgUrl = 'https://xxx.png'" alt="">

• 如果要做离线渲染图片可以先把图片转换base64存在本地

  /*  获取图片的base64码
  * @param {obj}img图片dom对象
  * */
  function getBase64Image(img) {
      let canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      let ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);  //绘制相同图片
      return canvas.toDataURL("image/png"); //转换成base64数据
  }

• 后边需要渲染图片的时候只需要把img标签的src指向base64数据就ok了（存起来的时候最好建立关联关系 这样用的时候可以快速匹配）

  <img class="good-img" :src="imgUrl" @error="() => imgUrl = 'your base64'" alt="">