From 01cf735453bb4f2757615beab5ee72480c07e417 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Wed, 20 Mar 2024 10:13:27 +0800
Subject: [PATCH] 优化图片预览组件，支持缩略图加载失败回退
---
forms/imagePicker/CImagePreview.vue | 12 +++++++++---
1 files changed, 9 insertions(+), 3 deletions(-)
diff --git a/forms/imagePicker/CImagePreview.vue b/forms/imagePicker/CImagePreview.vue
index d36b9c3..816f639 100644
--- a/forms/imagePicker/CImagePreview.vue
+++ b/forms/imagePicker/CImagePreview.vue
@@ -11,9 +11,10 @@
mode="aspectFit"
:lazyLoad="true"
v-for="(img, index) of imgList"
- :src="img.thumb"
+ :src="loadFail[index] ? img.org : img.thumb"
:key="index"
@tap="evt => $preview({ current: img.org, urls: imgs })"
+ @error="evt => handleLoadError(index)"
/>
</view>
</template>
@@ -48,11 +49,13 @@
},
},
data() {
- return {};
+ return {
+ loadFail: [],
+ };
},
computed: {
imgList() {
- return this.imgs.map(img => ({
+ return this.imgs.map((img, index) => ({
org: img,
thumb: this.useThumb
? img.replace(/(.*?)(\.(png|jpg|jpeg|gif))$/, '$1_thumb$2')
@@ -61,6 +64,9 @@
},
},
methods: {
+ handleLoadError(index) {
+ this.loadFail.splice(index, 1, true);
+ },
// option { current, urls }
$preview(option) {
// 网页模式下，增加缩放操作
--
Gitblit v1.9.1