vue项目中，当后端返回来的img图片src地址获取失败时

css用到flex布局很常见，但是使用中遇到了img元素，无图片时选择默认图片，反之用后端传递过来的图片地址。此时后端传递过来的的图片地址，在浏览器中打开是无法获取到图片时，由于flex布局的原因，导致后面的元素先前顶，占据原来图片的位置。为了解决这个问题，你或许需要如下操作：

 <img :src="item.recruiteePhotoUrl" alt v-if="item.recruiteePhotoUrl" />
  <img :src="defaultImg" v-else  alt/>
//item.recruiteePhotoUrl 链接无法获取到图片，但if此时是布尔值判断，else是不会触发的。默认图片也就无法显示

你需要这样做

<img :src="item.recruiteePhotoUrl" alt v-if="item.recruiteePhotoUrl" @error="nofind($event)"/>
<img :src="defaultImg" v-else  alt/>
//添加原生error事件(图片无法打开会触发这个事件，形参 $event 一定要传)

为什么是$event ？

最后在methods里面定义方法

methods{
   nofind(event) { 
            let img=event.srcElement; 
            img.src=require("@/assets/default.png");  //这个路径是你的本地图片路径
            img.onerror=null;  // 控制不要一直跳动 
        },
}