vue项目中 img标签加载图片失败，让其显示默认图片

<img src="123" @error="defImg" alt="" width="150" >

可以通过error事件调用函数显示默认的图片

之前在网上看到的方法是下面这样的

export default {
    data() {
          return {
                  defaultImg: require("@/assets/img/img_fail.png"),
          }
     },
     methods: {
         defImg(){
                    let img = event.srcElement;
                    img.src = this.defaultImg;
                    img.onerror = null; //防止闪图
            },
     }
}
控制台报错了require is not define的错误

然后修改了下获取默认图片的方法

通过import的方式引入图片

import defaultImg from ./fefault.png

把获取默认图片的方式修改后，在获取图片失败的情况下·可以显示默认的图片了