Performance optimization of image loading failure in Vue

Scenario: Basically, the pictures in our project are sent through the background and we render them on the dom. But once the app is launched, if the background reports an error and we cannot receive the pictures, it will have a bad experience for users.

<img :src="imgUrl" @error="handleError" alt="">
<script>
export default{
  data(){
    return{
      imgUrl:''
    }
  },
  methods:{
    handleError(e){
      e.target.src=reqiure('图片路径') //这边可以填充一个通用的报错图片
    }
  }
}
</script>

Guess you like

Origin blog.csdn.net/qq_53114797/article/details/128797450