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)
	},
}
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
非常抱歉,我之前回答的答案有误,应该是针对微信小程序的解决方案,对于uni-app项目,可以使用以下的解决方案: 1. 在uni-app项目中,可以通过使用 `uni.getImageInfo` 方法获取到图片的信息,包括图片的宽高和DPR。 2. 可以通过 `uni.getSystemInfo` 方法获取到设备信息,包括设备的DPR。 3. 在渲染图片时,可以根据设备的DPR和图片的DPR之间的比例,来动态计算出图片的宽高值,从而实现自适应加载图片。 4. 对于给定的资源图,可以在代码中使用类似以下的方式来加载图片: ```html <!-- 组件中 --> <template> <img :src="imgUrl" /> </template> <script> export default { data() { return { imgUrl: '' } }, created() { this.loadImage() }, methods: { async loadImage() { const { platform, pixelRatio, screenWidth } = await uni.getSystemInfo() const { width, height, path, type } = await uni.getImageInfo({ src: '../../static/img/[email protected]' }) const imgDpr = path.includes('@') ? parseInt(path.split('@')[1].split('x')[0]) : 1 // 图片DPR const dpr = platform === 'devtools' ? 2 : pixelRatio // 设备DPR const imgWidth = width / imgDpr * dpr // 图片实际宽度 const imgHeight = height / imgDpr * dpr // 图片实际高度 this.imgUrl = path.includes('@') ? path.replace(`@${imgDpr}x`, `@${dpr}x`) : `${path}@${dpr}x.${type}` } } } </script> ``` 在上面的代码中,我们使用 `uni.getSystemInfo` 方法获取了设备的平台信息、像素比和屏幕宽度,并通过 `uni.getImageInfo` 方法获取了图片的宽高和DPR。然后我们根据设备的DPR和图片的DPR之间的比例,计算出了图片的实际宽高值,最后拼接出了图片的最终URL,从而实现了自适应加载图片的效果。 需要注意的是,对于没有@1x图的资源,我们可以默认将其DPR设置为1,这样就可以保证在所有设备上都能正确地加载图片。另外,由于在开发工具中,设备的像素比可能不是真实的像素比,所以我们需要对开发工具做特殊处理,将像素比设置为2。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值