im/components/CacheImage/index.vue

<template>
	<view @longpress="longpress" >
	<u-image 
		@click="click" 
		:width="width"
		:height="height"
		:mode="mode" 
		@error="errorHandle" 
		:src="cachesrc"></u-image>
	</view>
</template>

<script>
	import util from "@/util";
	export default {
		name: "CacheImage",
		props: {
			src: String,
			type: {
				type: String,
				default: "images",
			},
			mode:{
				type: String,
				default: "aspectFill",
			},
			width: {
				type: Number|String,
				default: "100",
			},
			height: {
				type: Number|String,
				default: "",
			},
			shape:{
				type: String,
				default: "square",
			}
		},
		data() {
			return {
				cachesrc:"",
			};
		},
		created() {
			this.init(this.src);
		},
		watch: {
			src(newVal) {
				this.init(newVal);
			},
		},
		methods: {
			init(nv){
				const _this = this;
				if (nv) {
					util.cacheFile(util.cdn(nv),this.type).then(res=>{
						_this.cachesrc = res;
						//console.log(_this.cachesrc);
					});
					return ;
				}
			},
			errorHandle() {
				this.cachesrc="/static/images/default_image.png";
			},
			click() {
				this.$emit("click");
			},
			longpress() {
				this.$emit("longpress");
			},
		}
	};
</script>

<style></style>