fix(nc-gui): convert to LazyNuxtImg

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>

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)"
               />