From 0bc47dc627a8c478eebce183bbfd6fff5b3c5f2a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 7 Feb 2023 18:25:35 +0800
Subject: [PATCH] fix(nc-gui): convert to LazyNuxtImg

---
 .../nc-gui/components/cell/attachment/Carousel.vue  |  7 ++-----
 .../nc-gui/components/cell/attachment/Modal.vue     | 13 +++++++------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 2119889c59..35f76e3d6c 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -9,7 +9,7 @@ const carouselRef = ref()
 
 const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype)))
 
-const { getAttachmentSrc, showFallback, getBackgroundImage } = useAttachment()
+const { getAttachmentSrc, showFallback } = useAttachment()
 
 /** navigate to previous image on button click */
 onKeyDown(
@@ -95,10 +95,7 @@ onClickOutside(carouselRef, () => {
             </a>
           </template>
           <div v-for="item of imageItems" :key="getAttachmentSrc(item)">
-            <div
-              :style="{ backgroundImage: getBackgroundImage(item) }"
-              class="min-w-70vw min-h-70vh w-full h-full bg-contain bg-center bg-no-repeat"
-            />
+            <LazyNuxtImg :src="getAttachmentSrc(item)" class="max-w-70vw max-h-70vh" :onerror="(e) => showFallback(e, item)" />
           </div>
         </a-carousel>
       </div>
diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index c3eb54391a..d86794da4b 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -38,7 +38,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
 const { isSharedForm } = useSmartsheetStoreOrThrow()
 
-const { getAttachmentSrc, getBackgroundImage } = useAttachment()
+const { getAttachmentSrc, showFallback } = useAttachment()
 
 onKeyDown('Escape', () => {
   modalVisible.value = false
@@ -158,12 +158,13 @@ function onRemoveFileClick(title: any, i: number) {
 
             <div
               :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
-              class="nc-attachment h-full w-full flex items-center justify-center"
+              class="nc-attachment h-full w-full flex items-center justify-center overflow-hidden"
             >
-              <div
-                v-if="isImage(item.title, item.mimetype) && getAttachmentSrc(item)"
-                :style="{ backgroundImage: getBackgroundImage(item) }"
-                class="w-full h-full bg-contain bg-center bg-no-repeat"
+              <LazyNuxtImg
+                v-if="isImage(item.title, item.mimetype)"
+                :src="getAttachmentSrc(item)"
+                class="max-w-full max-h-full margin-auto justify-center"
+                :onerror="(e) => showFallback(e, item)"
                 @click.stop="onClick(item)"
               />