新增压缩图片用于图片展示替换原图

rain

2025-04-23 8d91e35b636e98f643a91c64e530b5c63479ca0c

新增压缩图片用于图片展示替换原图

 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>