上面代码的获取当前设备的DPR值语法uni.$device.pixelRatio，获取失败

如果使用 `uni.$device.pixelRatio` 获取设备的 DPR 值失败，可能是因为当前的运行环境不支持 uni.$device 对象。

在 uni-app 中，uni.$device 对象是由 uni-app 自动注入的，因此只有在运行在 uni-app 环境下才能正常使用该对象。如果在非 uni-app 环境下使用 uni.$device 对象，可能会报错或者返回 undefined。

为了解决这个问题，可以使用以下方法获取设备的 DPR 值：

if (uni.getSystemInfoSync) {
  const sysInfo = uni.getSystemInfoSync();
  const dpr = sysInfo.pixelRatio;
  // 使用 dpr 值进行图片加载
} else {
  // 获取设备信息失败，使用默认值进行图片加载
}

在上面的代码中，首先使用 `uni.getSystemInfoSync()` 方法获取设备信息，然后从设备信息中获取 DPR 值。如果获取设备信息失败，则可以使用默认值进行图片加载，例如使用 @2x 倍图。

需要注意的是，使用 `uni.getSystemInfoSync()` 方法获取设备信息是同步的，这意味着该方法会阻塞 JavaScript 运行环境，建议在必要的时候使用该方法。

相关问题

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。

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加载图片的功能，大大简化了项目开发的过程。