vue解决图片报错，添加默认图片

在我们写项目的时候，会遇到图片由于网络原因加载不出来的问题，后端返回的图片地址不正确，这个时候，为了提高用户的体验，我们通常会添加默认图片。但是在添加默认图片的时候也会有许多的问题，一开始，测试只是发现一张俩张的图片不显示，我们就单独的在某个组件中给他添加了默认图片，后来又发现好多页面的图片都需要添加这个效果，这个时候，就不能是一个页面一个页面的添加了，需要用到全局指令，这样的话，比起每个组件需要的都设置还是要方便一些。

单个页面一处添加默认图片的方式

//一开始，如果一个组件里面有一个图片需要修改，我想到的是计算属性来设置默认图片，绑定图片的onerror事件
<img :src="item.img" alt :onerror="defaultImg" />
import errorImg from '@/assets/img/default.png'; //图片路径
data(){
	return {
		errorImg :errorImg 
	}
}
computed:{
	defaultImg(){
		return 'this.src="'+errorImg+'"';
		}
}

单个页面多处添加默认图片的方式

//然后，发现有的页面多处需要添加默认图片，而且产品需求的不同，添加不同的默认图片，我又用到了方法
<img :src="item.img1"  @error="errorImg(img1,$event)" />
<img :src="item.img2"  @error="errorImg(img2,$event)" />
import img1 from '@/assets/img/default1.png'; //图片路径
import img2 from '@/assets/img/default2.png'; //图片路径
data(){
	return {
		img1 :img1,
		img2 :img2 
	}
}
methods:{
	errorImg(url,event){
		if (url == img1) {
        event.target.src = img1;
      } else if (url == img2) {
        event.target.src = img2;
      }
	}
}

好多页面添加默认图片的方式

//最后的最后，要添加的默认图片越来越多，不得已换种方式吧，选择了全局自定义指令
import apple from '@/assets/img/apple.png'; //图片
import banana from '@/assets/img/banana.png'; //图片
import pear from '@/assets/img/pear.png'; //图片
Vue.directive("errorImg",{
	bind:function(el,binding){	 
         el.onerror=function(){
	         if(binding.arg == 'apple'){
	         	 el.src = apple;
	         }else if(binding.arg == 'banana'){
	          el.src = banana;
	        }else if(binding.arg == 'pear'){
	          el.src = pear;
	        }
        }
	}
})

页面中使用
<img :src="item.img" v-errorImg:apple />//传参