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 />//传参