From 8d91e35b636e98f643a91c64e530b5c63479ca0c Mon Sep 17 00:00:00 2001
From: rain <1679827795@qq.com>
Date: Wed, 23 Apr 2025 19:31:36 +0800
Subject: [PATCH] 新增压缩图片用于图片展示替换原图
---
src/views/tickets/ticket.vue | 14 +++++++++++---
1 files changed, 11 insertions(+), 3 deletions(-)
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index 2a89be3..3c8d35e 100644
--- a/src/views/tickets/ticket.vue
+++ b/src/views/tickets/ticket.vue
@@ -311,7 +311,7 @@
<div class="media-title">事件图片</div>
<div class="media-content">
<el-image v-if="currentDetail.mediaUrl" :src="getThumbUrl(currentDetail.mediaUrl)"
- :preview-src-list="[currentDetail.mediaUrl]" fit="contain"
+ :preview-src-list="[getPreviewUrl(currentDetail.mediaUrl)]" fit="contain"
style="width: 700px; height: 520px; cursor: pointer;">
<template #placeholder>
<div class="image-placeholder">
@@ -337,7 +337,7 @@
<div class="media-title">工单处理图片</div>
<div class="media-content">
<el-image v-if="currentDetail.updatePhotoUrl" :src="getThumbUrl(currentDetail.updatePhotoUrl)"
- :preview-src-list="[currentDetail.updatePhotoUrl]" fit="fill"
+ :preview-src-list="[getPreviewUrl(currentDetail.updatePhotoUrl)]" fit="fill"
style="width: 700px; height: 520px; cursor: pointer;">
<template #placeholder>
<div class="image-placeholder">
@@ -2102,7 +2102,7 @@
// 获取所有图片列表用于预览
getImageList() {
return this.selections
- .map(item => item.photo_url)
+ .map(item => this.getPreviewUrl(item.photo_url))
.filter(url => url); // 过滤掉空值
},
@@ -2138,6 +2138,14 @@
if (lastDot === -1) return url;
return url.slice(0, lastDot) + '_small' + url.slice(lastDot);
},
+
+ // 添加新方法：获取预览图地址
+ getPreviewUrl(url) {
+ if (!url) return '';
+ const lastDot = url.lastIndexOf('.');
+ if (lastDot === -1) return url;
+ return url.slice(0, lastDot) + '_show' + url.slice(lastDot);
+ },
},
};
</script>
--
Gitblit v1.9.3