uni-app怎么实现整个项目的自适应 DPR 加载图片

要实现整个uni-app项目的自适应DPR加载图片，可以在main.js中全局注册一个自定义指令，在指令中实现自适应DPR加载图片的功能。具体步骤如下：

1. 在main.js中定义一个自定义指令，例如“dpr-img”。

Vue.directive('dpr-img', {
  inserted: function (el, binding) {
    const dpr = uni.$device.pixelRatio; // 获取当前设备的DPR值
    const imgUrl = binding.value; // 获取绑定的图片路径
    el.setAttribute('src', `${imgUrl}@${dpr}x.png`); // 设置图片路径
  }
})

2. 在需要加载图片的地方，使用v-dpr-img指令动态绑定图片路径。

<template>
  <div>
    <img v-dpr-img="/static/img/avatar.png" alt="">
  </div>
</template>

在上面的示例中，使用v-dpr-img指令绑定了图片路径“/static/img/avatar.png”，指令会自动根据当前设备的DPR值，动态添加“@2x”或“@3x”后缀，从而实现自适应DPR加载图片的功能。

这样，在整个uni-app项目中，只需要使用v-dpr-img指令来加载图片，就可以实现自适应DPR加载图片的功能，大大简化了项目开发的过程。

相关问题

uni-app自定义指令实现自适应 DPR 加载图片

在uni-app中，可以通过自定义指令来实现自适应DPR加载图片。具体步骤如下：

1. 在项目的`main.js`中注册自定义指令：

import Vue from 'vue';
import App from './App';

Vue.config.productionTip = false;

// 注册自定义指令
Vue.directive('adapt-img', {
  bind: function (el, binding) {
    let dpr = window.devicePixelRatio;
    let value = binding.value;
    if (value) {
      if (dpr >= 3 && value.indexOf('@3x') !== -1) {
        el.setAttribute('src', value.replace('@3x', ''));
      } else if (dpr >= 2 && value.indexOf('@2x') !== -1) {
        el.setAttribute('src', value.replace('@2x', ''));
      } else {
        el.setAttribute('src', value);
      }
    }
  },
});

App.mpType = 'app';

const app = new Vue({
  ...App,
});
app.$mount();

这里注册了一个名为`adapt-img`的自定义指令，当该指令绑定到元素上时，会根据当前设备的DPR加载对应的图片。

2. 在需要使用自适应DPR加载图片的地方，将自定义指令`adapt-img`绑定到`<img>`标签上，并设置图片路径：

<template>
  <div class="demo">
    <img v-adapt-img src="@/static/img/demo@3x.png" />
  </div>
</template>

<style>
.demo img {
  width: 100px;
  height: 100px;
}
</style>

这里将自定义指令`adapt-img`绑定到`<img>`标签上，并设置图片路径为`@/static/img/demo@3x.png`。在绑定指令时，可以将图片路径作为指令的值传递过去。

3. 在图片文件夹中，只需要提供@2x和@3x倍图即可，不需要提供@1x倍图。

这样，当页面加载时，自定义指令会根据当前设备的DPR加载对应的图片，如果当前设备的DPR为1，则会加载原始图片。

需要注意的是，如果图片文件名中包含了`@2x`或`@3x`，需要在指令中进行判断并替换。如果图片文件名中没有包含`@2x`或`@3x`，则直接加载原始图片。

uni-app怎么实现自适应 DPR 加载图片

在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');

下面是一个示例代码：

<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。