uni-app 微信小程序全局图片加载失败处理

image的error事件

<image :src="take"  @error="imgError('take')"></image>

处理

tool.js

/* 图片加载失败处理 
	that 图片绑定字段所属对象
	dat 图片绑定字段
*/
export const imgErr = (that,dat)=>{
     
	that[dat] = "../../static/img/sb.png" //默认图片路径
	// 默认图片路径如果也加载失败 就没了 不会继续触发
}

单个图片处理

<image :src="take"  @error="imgError('take')"></image>

import {
     imgErr} from '@/store/tool.js'
methods:{
     
	imgError(str){
     
		imgErr(this,str)
	},
}

多个图片处理

<image v-for="(item,i) in cArr" :src="item" :key="i"@error="imgErrorArr(cArr,i)"></image>

import {
     imgErr} from '@/store/tool.js'
methods:{
     
	data(){
     
		return{
     
			arr:[
				//'xx.jpg','xx2.jpg'
			]
		}
	}
	imgError(arr,str){
     
		imgErr(arr,str)
	},
}