uniapp图片缓存功能示例

作用：提高软件性能和用户体验，优化图片加载和渲染速度

思路：先使用uni.getImageInfo()方法获取图片信息，然后将图片信息保存到本地缓存中，下次再访问相同图片时，直接从本地缓存里拿到本地路径访问。

示例：

<template>
  <view>
     <image :src="storageSrc"/>
  </view>
</template>

<script>
import { getImage } from "@/api/device/xxx";
export default {
  data() {
    return {
       storageSrc:null
    }
  },
  created() {
       this.getImage();
  },
  methods:{
	    //请求图片地址
		getImage(){
			uni.showLoading({mask:true,title:'加载中'});
			getImage().then(res=>{
                    let imgSrc = res.imgSrc;
                    //先获取缓存里的图片请求路径，如果与需要访问的图片相同，直接使用此前缓存的本地图片地址
					if(uni.getStorageSync('imgSrc') === imgSrc){
						this.storageSrc= uni.getStorageSync('imgPath');
					}else{
						uni.getImageInfo({                                                                             
                            //图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径	
							src:imgSrc,
							success:res=> {
                                //图片加载成功后，缓存请求地址和本地地址
								uni.setStorageSync('imgSrc',imgSrc)
								uni.setStorageSync('imgPath',res.path)
                                //使用本地图片地址渲染
								this.storageSrc= res.path;
							}
						})
					}
                    uni.hideLoading();
				}
			})
		},
	}
}
</script>