uni-app实现整个项目自适应 DPR 加载图片,要求兼容小程序、H5和App。另外给定的资源图里有@2x、@3x,有的图片没有@1x图,请给出兼容有效写法
时间: 2024-03-08 16:49:03 浏览: 23
非常抱歉,我之前回答的答案有误,应该是针对微信小程序的解决方案,对于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/test@2x.png' })
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。