实现原理：将后端返回的图片资源下载下来，然后通过uni.getStorageSync缓存到本地缓存里面，这样每次会先从本地缓存里面去查找，没找到才会去请求图片资源。

<template>
	<image :src="img_url" :mode="mode" :lazy-load="lazyLoad" :style="setStyle" @click.stop="clickImg"></image>
</template>

<script>
	export default {
		props: {
			mode: { //图片裁剪、缩放的模式
				type: String,
				default: ''
			},
			lazyLoad: { // 懒加载
				type: Boolean,
				default: true
			},
			imgSrc: { // 图片路径
				type: String
			},
			defaultImg: {
				type: String,
				default: '/static/imgs/empty.png'
			},
			setStyle: { // 图片样式
				type: String,
				default: ''
			}
		},
		data() {
			return {
				img_url: ''
			}
		},
		watch: {
			imgSrc: {
				async handler(src) {
					const sign = 'cachednewmage#';
					const _img = uni.getStorageSync(sign + src); // 同步方法  
					if (_img) {
						// 得到缓存的图片 , 直接使用缓存的图片  
						this.img_url = _img.path;
					} else {
						uni.getImageInfo({
								src: src
							})
							.then(data => {
								//data为一个数组，数组第一项为错误信息，第二项为返回数据  
								let [error, res] = data;
								if (error) {
									this.img_url = src
								} else {
									// #ifdef H5
									uni.setStorage({
										key: sign + src,
										data: {
											path: res.path
										}
									})
									// #endif
									// #ifdef APP-PLUS
									uni.saveFile({
											tempFilePath: res.path
										})
										.then(data => {
											let [saveFile_error, saveFile_res] = data;
											if (saveFile_res) {
												uni.setStorage({
													key: sign + src,
													data: {
														path: saveFile_res.savedFilePath
													}
												})
											}
										})
									// #endif
									// 拿到获取的图片信息  
									this.img_url = res.path;
									// console.log(this.img_url);
								}
							})
							.catch(err => {
								console.error('uni.getImageInfo err', err);
							});
					}
				},
				immediate: true
			}
		},
		methods: {
			clickImg() {
				this.$emit("clickImg")
			}
		}
	}
</script>