From 10d717e105e1730637ff55bbae9bd184cfb45c03 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Sun, 26 Nov 2023 12:30:05 +0700
Subject: [PATCH] fix: fallback nuxt image

---
 .../ui/src/components/MediaItem/MediaItem.vue |  2 +-
 .../components/MediaItem/type/ImageMedia.vue  | 36 ++++++++++++++-----
 .../ui/src/components/NeoAvatar/NeoAvatar.vue | 16 +++------
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/libs/ui/src/components/MediaItem/MediaItem.vue b/libs/ui/src/components/MediaItem/MediaItem.vue
index fa15360064..23f7b40097 100644
--- a/libs/ui/src/components/MediaItem/MediaItem.vue
+++ b/libs/ui/src/components/MediaItem/MediaItem.vue
@@ -96,7 +96,7 @@ const props = withDefaults(
     original: false,
     isLewd: false,
     isDetail: false,
-    placeholder: '',
+    placeholder: './Koda.svg',
     disableOperation: undefined,
     audioPlayerCover: '',
     imageComponent: 'img',
diff --git a/libs/ui/src/components/MediaItem/type/ImageMedia.vue b/libs/ui/src/components/MediaItem/type/ImageMedia.vue
index b118ebec23..145b219c6f 100644
--- a/libs/ui/src/components/MediaItem/type/ImageMedia.vue
+++ b/libs/ui/src/components/MediaItem/type/ImageMedia.vue
@@ -5,14 +5,32 @@
       'is-square image': !original,
       'is-detail': isDetail,
     }">
+    <!-- load normal image -->
     <TheImage
+      v-if="status === 'ok'"
       :image-component="imageComponent"
       :image-component-props="{ sizes }"
       :src="src"
       :alt="alt"
       class="is-block image-media__image no-border-radius"
       data-testid="type-image"
-      @error.once="onError" />
+      @error.once="() => onError('error-1')" />
+    <!-- if fail, try to load original url -->
+    <!-- e.g: NuxtImg component will replace image-worker url to cf-image. there is a case when cf-image return 404 -->
+    <img
+      v-if="status === 'error-1'"
+      :src="src"
+      :alt="alt"
+      class="is-block image-media__image no-border-radius"
+      data-testid="type-image"
+      @error.once="() => onError('error-2')" />
+    <!-- else, load placeholder -->
+    <img
+      v-if="status === 'error-2'"
+      :src="placeholder"
+      :alt="alt"
+      class="is-block image-media__image no-border-radius"
+      data-testid="type-image" />
   </figure>
 </template>
 
@@ -34,16 +52,18 @@ const props = withDefaults(
   }>(),
   {
     sizes: '450px md:350px lg:270px',
+    imageComponent: 'img',
+    src: '',
+    alt: '',
   },
 )
 
-const onError = (e: Event) => {
-  const target = e.target as HTMLImageElement
-  if (target) {
-    consola.log('[KODADOT::IMAGE] unable to load', props.src, e)
-    target.removeAttribute('srcset')
-    target.src = props.placeholder
-  }
+type Status = 'ok' | 'error-1' | 'error-2'
+const status = ref<Status>('ok')
+
+const onError = async (phase: Status) => {
+  consola.log('[KODADOT::IMAGE] unable to load:', `${phase}:`, props.src)
+  status.value = phase
 }
 </script>
 
diff --git a/libs/ui/src/components/NeoAvatar/NeoAvatar.vue b/libs/ui/src/components/NeoAvatar/NeoAvatar.vue
index 033ac905ab..6a943b3d73 100644
--- a/libs/ui/src/components/NeoAvatar/NeoAvatar.vue
+++ b/libs/ui/src/components/NeoAvatar/NeoAvatar.vue
@@ -1,6 +1,7 @@
 <template>
-  <TheImage
+  <ImageMedia
     v-if="avatar"
+    :placeholder="placeholder"
     :image-component="imageComponent"
     :src="avatar"
     :alt="name"
@@ -8,10 +9,11 @@
     :width="size"
     :height="size"
     :style="customStyle"
-    @error.once="onError" />
+    :original="true" />
   <img
     v-else
     :src="placeholder"
+    :alt="name"
     :width="size"
     :height="size"
     :style="customStyle"
@@ -20,7 +22,7 @@
 
 <script setup lang="ts">
 import type { ImageComponent } from '../TheImage/TheImage.vue'
-import TheImage from '../TheImage/TheImage.vue'
+import ImageMedia from '../MediaItem/type/ImageMedia.vue'
 
 const props = defineProps<{
   imageComponent?: ImageComponent
@@ -34,14 +36,6 @@ const customStyle = computed(() => ({
   width: `${props.size}px`,
   height: `${props.size}px`,
 }))
-
-const onError = (e: Event) => {
-  const target = e.target as HTMLImageElement
-  if (target) {
-    target.removeAttribute('srcset')
-    target.src = props.placeholder
-  }
-}
 </script>
 
 <style lang="scss">