uni-app怎么实现整个项目的自适应 DPR 加载图片，图片里有的有只有@2x和@3x倍图，没有@1x倍图

如果整个uni-app项目中的图片只有@2x和@3x倍图，没有@1x倍图，可以将上面的自定义指令做一些修改，使其在没有@1x倍图的情况下也能正常加载图片。具体步骤如下：

1. 修改自定义指令，将“@1x”视为默认情况，如果没有@1x倍图，就使用@2x倍图。

Vue.directive('dpr-img', {
  inserted: function (el, binding) {
    const dpr = uni.$device.pixelRatio; // 获取当前设备的DPR值
    const imgUrl = binding.value; // 获取绑定的图片路径
    let imgPath = imgUrl.replace(/(@2x|@3x)/g, ''); // 去掉路径中的@2x和@3x
    if (dpr === 1) {
      imgPath += '@2x.png'; // 如果DPR为1，就使用@2x倍图
    } else if (dpr === 2 || dpr === 3) {
      imgPath += `@${dpr}x.png`; // 如果DPR为2或3，就使用对应的倍图
    }
    el.setAttribute('src', imgPath); // 设置图片路径
  }
})

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”后缀，如果没有@1x倍图，就使用@2x倍图，从而实现自适应DPR加载图片的功能。

这样，在整个uni-app项目中，只需要使用v-dpr-img指令来加载图片，就可以实现自适应DPR加载图片的功能，即使没有@1x倍图也能正常加载图片。