uni-app实现整个项目自适应 DPR 加载图片,要求兼容小程序、H5和App。另外给定的资源图里有@2x、@3x,有的图片没有@1x图,请给出兼容有效写法
时间: 2024-03-08 22:48:57 浏览: 16
针对这个问题,我可以给出以下的解决方案:
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 { screenWidth } = await uni.getSystemInfo()
const { width, height, path, type } = await uni.getImageInfo({ src: '../../static/img/test@2x.png' })
const dpr = screenWidth / 750 // 设备DPR
const imgDpr = width / (750 * dpr) // 图片DPR
const imgWidth = width / imgDpr // 图片实际宽度
const imgHeight = height / imgDpr // 图片实际高度
this.imgUrl = `${path}@${imgDpr}x.${type}`
}
}
}
</script>
```
在上面的代码中,我们使用 `uni.getSystemInfo` 方法获取了设备的屏幕宽度,并通过 `uni.getImageInfo` 方法获取了图片的宽高和DPR。然后我们根据设备的DPR和图片的DPR之间的比例,计算出了图片的实际宽高值,最后拼接出了图片的最终URL,从而实现了自适应加载图片的效果。
值得注意的是,对于没有@1x图的资源,我们可以默认将其DPR设置为1,这样就可以保证在所有设备上都能正确地加载图片。