uni-app利用自定义指令实现项目自适应 DPR 加载图片，要求兼容小程序、H5和App。另外给定的资源图里有@2x、@3x，有的图片没有@1x图，请给出兼容有效写法

好的，下面是一种兼容小程序、H5和App的方案，可以利用自定义指令实现项目自适应DPR加载图片，并兼容处理@2x、@3x和缺失@1x的情况。

1. 在App.vue或main.js中全局注册自定义指令

// App.vue或main.js
import Vue from 'vue'

// 自适应DPR加载图片指令
Vue.directive('adapt-dpr', {
  inserted: (el, binding) => {
    const img = new Image()
    let imgUrl = binding.value
    const DPR = uni.getSystemInfoSync().pixelRatio // 获取当前设备的DPR值
    // 判断图片地址是否存在@2x或@3x后缀，若存在则替换为当前设备DPR对应的后缀
    if (/@2x/.test(imgUrl)) {
      imgUrl = imgUrl.replace(/@2x/, `@${DPR}x`)
    } else if (/@3x/.test(imgUrl)) {
      imgUrl = imgUrl.replace(/@3x/, `@${DPR}x`)
    }
    // 判断图片地址是否存在@1x后缀，若不存在则手动添加
    if (!/@1x/.test(imgUrl)) {
      imgUrl = imgUrl.replace(/\.\w+$/, `@1x$&`)
    }
    img.src = imgUrl
    img.onload = () => {
      el.style.backgroundImage = `url(${imgUrl})`
    }
  }
})

2. 在需要使用的组件中绑定指令，并传入图片地址

<!-- 在组件template中 -->
<template>
  <div class="image-container" v-adapt-dpr="imgUrl"></div>
</template>

<!-- 在组件script中 -->
<script>
export default {
  data() {
    return {
      imgUrl: 'path/to/image.png'
    }
  }
}
</script>

<!-- 在组件style中 -->
<style>
.image-container {
  width: 100px;
  height: 100px;
  background-size: cover;
}
</style>

这样，在不同DPR的设备上，通过自定义指令加载的图片会自动适应分辨率，并根据@2x、@3x和缺失@1x的情况进行兼容处理。

需要注意的是，在使用自定义指令加载图片时，需要将图片地址传递给指令，并且不要在地址中手动添加DPR后缀，因为在自定义指令中已经对地址进行了处理。同时，为了兼容处理缺失@1x的情况，需要在自定义指令中判断图片地址是否存在@1x后缀，若不存在则手动添加。