From 4cf26182a0956c3c44745542aaf21dd75784f0f0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 9 Feb 2023 16:35:46 +0800
Subject: [PATCH] fix(nc-gui): show LazyCellAttachmentImage for images only

---
 .../nc-gui/components/cell/attachment/index.vue   |  6 ++----
 packages/nc-gui/components/smartsheet/Gallery.vue | 15 +++++++++------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 4eb0a5d6d4..894756746d 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -221,13 +221,11 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
             <template #title>
               <div class="text-center w-full">{{ item.title }}</div>
             </template>
-
-            <template v-if="isImage(item.title, item.mimetype ?? item.type)">
+            <div v-if="isImage(item.title, item.mimetype ?? item.type)">
               <div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item">
                 <LazyCellAttachmentImage :alt="item.title || `#${i}`" :src="getPossibleAttachmentSrc(item)" />
               </div>
-            </template>
-
+            </div>
             <div v-else class="nc-attachment flex items-center justify-center" @click="openAttachment(item)">
               <component :is="FileIcon(item.icon)" v-if="item.icon" />
 
diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 8aa79626e4..5196e9dbcc 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -18,6 +18,7 @@ import {
   createEventHook,
   extractPkFromRow,
   inject,
+  isImage,
   isLTAR,
   nextTick,
   onMounted,
@@ -202,12 +203,14 @@ watch(view, async (nextView) => {
                   <div style="z-index: 1"></div>
                 </template>
 
-                <LazyCellAttachmentImage
-                  v-for="(attachment, index) in attachments(record)"
-                  :key="`carousel-${record.row.id}-${index}`"
-                  class="h-52 object-contain"
-                  :src="getPossibleAttachmentSrc(attachment)"
-                />
+                <template v-for="(attachment, index) in attachments(record)">
+                  <LazyCellAttachmentImage
+                    v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
+                    :key="`carousel-${record.row.id}-${index}`"
+                    class="h-52 object-contain"
+                    :src="getPossibleAttachmentSrc(attachment)"
+                  />
+                </template>
               </a-carousel>
 
               <MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" />