Vue judges whether the picture exists, and displays the default picture after the picture fails to load

Some small utils about pictures

1. Determine whether the picture exists

export function CheckImgExists(imgurl) {
  var ImgObj = new Image() // 判断图片是否存在
  ImgObj.src = imgurl
  // 存在图片
  if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
    return true
  } else {
    return false
  }
}

2. The default picture is displayed after the picture fails to load

<img :src="src" alt="" :onerror="defalutUrl">


 data() {
    return {
      defalutUrl: 'this.src="' + require('./image/xxx.png') + '"'
    }
 },

Guess you like

Origin blog.csdn.net/qq_33168578/article/details/120025741