From 1fecbe0df846580f42bbf54a0ba03c04babab2be Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 7 Feb 2023 12:09:56 +0800
Subject: [PATCH] fix(nc-gui): apply getImgSrc and showFallback on Gallery and
 kanban

---
 .../nc-gui/components/smartsheet/Gallery.vue  | 19 ++++++++++++++++++-
 .../nc-gui/components/smartsheet/Kanban.vue   | 17 ++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 0128997248..ed32e305c0 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -168,6 +168,22 @@ watch(view, async (nextView) => {
     await loadGalleryData()
   }
 })
+
+const { appInfo } = useGlobal()
+
+const getImgSrc = (item: Record<string, any>) => {
+  if (item.data) {
+    return item.data
+  } else if (item.path) {
+    return `${appInfo.value.ncSiteUrl}/${item.path}`
+  }
+  return item.url
+}
+
+const showFallback = (evt: any, item: Record<string, any>) => {
+  evt.onerror = null
+  evt.target.src = item.url
+}
 </script>
 
 <template>
@@ -205,7 +221,8 @@ watch(view, async (nextView) => {
                   quality="90"
                   placeholder
                   class="h-52 object-contain"
-                  :src="attachment.url"
+                  :src="getImgSrc(attachment)"
+                  :onerror="(e) => showFallback(e, attachment)"
                 />
               </a-carousel>
 
diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 7ba8adbc50..8421c77858 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -312,6 +312,20 @@ watch(view, async (nextView) => {
     }
   }
 })
+
+const getImgSrc = (item: Record<string, any>) => {
+  if (item.data) {
+    return item.data
+  } else if (item.path) {
+    return `${appInfo.ncSiteUrl}/${item.path}`
+  }
+  return item.url
+}
+
+const showFallback = (evt: any, item: Record<string, any>) => {
+  evt.onerror = null
+  evt.target.src = item.url
+}
 </script>
 
 <template>
@@ -462,7 +476,8 @@ watch(view, async (nextView) => {
                                       quality="90"
                                       placeholder
                                       class="h-52 object-cover"
-                                      :src="attachment.url"
+                                      :src="getImgSrc(attachment)"
+                                      :onerror="(e) => showFallback(e, attachment)"
                                     />
                                   </a-carousel>