fix(nc-gui): try possible attachment sources

packages/nc-gui/components/cell/attachment/Carousel.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
-import { computed, isImage, onClickOutside, ref } from '#imports'
+import { computed, isImage, onClickOutside, ref, useAttachment } from '#imports'
 
 const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()!
 
@@ -9,6 +9,8 @@ const carouselRef = ref()
 
 const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype)))
 
+const { getAttachmentSrc, showFallback, getBackgroundImage } = useAttachment()
+
 /** navigate to previous image on button click */
 onKeyDown(
   (e) => ['Left', 'ArrowLeft', 'A'].includes(e.key),
@@ -87,14 +89,14 @@ onClickOutside(carouselRef, () => {
                 placeholder
                 class="!block"
                 :alt="imageItems[props.i].title || `#${props.i}`"
-                :src="imageItems[props.i].url || imageItems[props.i].data"
+                :src="getAttachmentSrc(imageItems[props.i])"
+                :onerror="(e) => showFallback(e, imageItems[props.i])"
               />
             </a>
           </template>
-
-          <div v-for="item of imageItems" :key="item.url">
+          <div v-for="item of imageItems" :key="getAttachmentSrc(item)">
             <div
-              :style="{ backgroundImage: `url('${item.url || item.data}')` }"
+              :style="{ backgroundImage: getBackgroundImage(item) }"
               class="min-w-70vw min-h-70vh w-full h-full bg-contain bg-center bg-no-repeat"
             />
           </div>

packages/nc-gui/components/cell/attachment/Modal.vue

@@ -2,7 +2,7 @@
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
 import { useSortable } from './sort'
-import { isImage, openLink, ref, useDropZone, useUIPermission, watch } from '#imports'
+import { isImage, openLink, ref, useAttachment, useDropZone, useUIPermission, watch } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
@@ -38,6 +38,8 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
 const { isSharedForm } = useSmartsheetStoreOrThrow()
 
+const { getAttachmentSrc, getBackgroundImage } = useAttachment()
+
 onKeyDown('Escape', () => {
   modalVisible.value = false
   isOverDropZone.value = false
@@ -159,8 +161,8 @@ function onRemoveFileClick(title: any, i: number) {
               class="nc-attachment h-full w-full flex items-center justify-center"
             >
               <div
-                v-if="isImage(item.title, item.mimetype)"
-                :style="{ backgroundImage: `url('${item.url || item.data}')` }"
+                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"
                 @click.stop="onClick(item)"
               />
@@ -170,10 +172,10 @@ function onRemoveFileClick(title: any, i: number) {
                 v-else-if="item.icon"
                 height="150"
                 width="150"
-                @click.stop="openLink(item.url || item.data)"
+                @click.stop="openLink(getAttachmentSrc(item))"
               />
 
-              <IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openLink(item.url || item.data)" />
+              <IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openLink(getAttachmentSrc(item))" />
             </div>
           </a-card>