分析代码作用Vue.directive('dpr-image', { inserted: function(el, binding) { console.log('dpr图片自适应') let url = binding.value.trim(); let dpr = Math.floor(uni.getSystemInfoSync().pixelRatio); if (dpr && dpr > 1) { // H5 和 App 环境下动态修改图片路径 if (process.env.VUE_APP_PLATFORM !== 'mp-weixin') { // 处理没有 @1x 图的图片 let imgPath = url.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，就使用对应的倍图 } // 在 <uni-image> 中添加 :src 属性 el.setAttribute('src', `${imgPath}`); } else { // 小程序环境下使用 v-else 实现兼容 el.setAttribute('src', binding.value); el.setAttribute( 'style', `background-image: url(${binding.value.replace(/\s+/g, '')})` ); } } else { // 如果设备 DPR 为 1，则直接加载原始图片 el.setAttribute('src', binding.value); } } })

这段代码是一个Vue自定义指令，名为dpr-image，作用是实现根据设备的DPR（设备像素比）自适应图片。当设备DPR为1时，直接加载原始图片；当DPR大于1时，动态修改图片路径，选择对应倍数的图片。在H5和App环境下，会处理没有@1x图的图片路径。在小程序环境下，使用v-else实现兼容。这个自定义指令可以用于Vue的模板中，在img标签上使用v-dpr-image指令即可。