通用图片预览组件调整

src/components/image-preview/image-preview.vue

@@ -1,22 +1,33 @@
 <template>
 	<image :src="imgUrlShow" fit="cover"></image>
-	<!-- <image class="img" src="@/static/images/test/1.png"></image> -->
 </template>
 
 <script>
-	import {previewFile} from'@/api/common.js'
+	import {previewFile, previewCacheThumbImage} from'@/api/common.js'
 	export default {
 		name:"image-preview",
 		props:{
 			imgId:{
 				default:'',
 				type:String
+			},
+			width:{
+				default:50,
+				type:[String, Number]
+			},
+			height:{
+				default:50,
+				type:[String, Number]
+			},
+			isCache:{
+				type: Boolean,
+				default: false
 			}
 		},
 		data() {
 			return {
-				imgUrlShow:'',
-				watching:false
+				imgUrlShow: '',
+				watching: false
 			};
 		},
 		watch: {
@@ -28,28 +39,19 @@
 				},
 				immediate: true,
 				deep: true,
-			},
-			imgUrlShow: {
-				handler(newval, oldval) {
-					if (oldval) {
-						// URL.revokeObjectURL(oldval);
-					}
-				},
-				immediate: true,
-				deep: true,
 			}
 		},
 		methods: {
 			getPreviewUrlBlob(id) {
-				// this.imgUrlShow = '@/static/images/index/message_b.png'
-				previewFile(id).then((res) => {
-					this.imgUrlShow = res;
-					// const reader = new FileReader();
-					// reader.readAsDataURL(res)
-					// reader.onloadend = () => {
-					// 	this.imgUrlShow = reader.result;
-					// }
-				});
+				if(this.isCache){
+					previewCacheThumbImage(id, this.width,this.height).then((res) => {
+						this.imgUrlShow = res;
+					});
+				}else{
+					previewFile(id).then((res) => {
+						this.imgUrlShow = res;
+					});
+				}
 			},
 		},
 		mounted() {
@@ -57,10 +59,7 @@
 				this.getPreviewUrlBlob(this.imgId);
 			}
 			this.watching = true
-		},
-		beforeDestroy() {
-			// URL.revokeObjectURL(this.imgUrlShow);
-		},
+		}
 	}
 </script>