Merge pull request #8252 from kodadot/fix/fallback-nuxtimg-to-image-w…

…orker
kodadot · Nov 27, 2023 · 998f9b6 · 998f9b6
2 parents e1bdbdf + 10d717e
commit 998f9b6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git 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
@@ -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
@@ -1,17 +1,19 @@
 <template>
- <TheImage
+ <ImageMedia
  v-if="avatar"
+ :placeholder="placeholder"
  :image-component="imageComponent"
  :src="avatar"
  :alt="name"
  class="border neo-avatar"
  :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">