uni-app怎么实现自适应 DPR 加载图片
时间: 2023-08-12 19:28:25 浏览: 141
在uni-app中实现自适应DPR加载图片,可以通过以下步骤实现:
1. 使用uni-app提供的$device对象获取当前设备的DPR。
2. 在需要加载图片的地方,使用v-bind指令动态绑定图片路径。
3. 在图片路径中使用“@”符号表示当前DPR,例如:“@2x”表示DPR为2时的图片路径,“@3x”表示DPR为3时的图片路径。
4. 在CSS中使用background-image属性时,同样可以使用“@”符号表示当前DPR,例如:background-image: url('bg@2x.png');
下面是一个示例代码:
```html
<template>
<div>
<img :src="imgUrl" alt="">
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: ''
}
},
mounted() {
const dpr = uni.$device.pixelRatio;
this.imgUrl = `/static/img/avatar@${dpr}x.png`;
}
}
</script>
<style scoped>
div {
width: 100px;
height: 100px;
background-image: url('/static/img/bg@2x.png');
}
</style>
```
在上面的示例中,mounted生命周期中获取当前设备的DPR值,然后动态绑定图片路径,从而实现自适应DPR加载图片。同时,在CSS中也使用了“@”符号表示当前DPR。
阅读全文