From 6a8a68a24051de0d95a015e29360474b57c72c21 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Mon, 19 Aug 2024 11:16:35 -0400
Subject: [PATCH] Image failed to load placeholder (#531)

* Image failed to load placeholder

* Use broken image placeholder in gallery

* nit
---
 src/components/common/ComfyImage.vue          | 58 +++++++++++++++++++
 .../sidebar/tabs/queue/ResultGallery.vue      |  9 ++-
 .../sidebar/tabs/queue/ResultItem.vue         |  7 ++-
 src/i18n.ts                                   |  2 +
 4 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 src/components/common/ComfyImage.vue

diff --git a/src/components/common/ComfyImage.vue b/src/components/common/ComfyImage.vue
new file mode 100644
index 0000000000..978aeec1f9
--- /dev/null
+++ b/src/components/common/ComfyImage.vue
@@ -0,0 +1,58 @@
+<!-- A image with placeholder fallback on error -->
+<template>
+  <img
+    :src="src"
+    @error="handleImageError"
+    :class="[{ 'broken-image': imageBroken }, ...classArray]"
+  />
+  <div v-if="imageBroken" class="broken-image-placeholder">
+    <i class="pi pi-image"></i>
+    <span>{{ $t('imageFailedToLoad') }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const props = defineProps<{
+  src: string
+  class?: string | string[] | object
+}>()
+
+const imageBroken = ref(false)
+const handleImageError = (e: Event) => {
+  imageBroken.value = true
+}
+
+const classArray = computed(() => {
+  if (Array.isArray(props.class)) {
+    return props.class
+  } else if (typeof props.class === 'string') {
+    return props.class.split(' ')
+  } else if (typeof props.class === 'object') {
+    return Object.keys(props.class).filter((key) => props.class[key])
+  }
+  return []
+})
+</script>
+
+<style scoped>
+.broken-image {
+  display: none;
+}
+
+.broken-image-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  margin: 2rem;
+}
+
+.broken-image-placeholder i {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+}
+</style>
diff --git a/src/components/sidebar/tabs/queue/ResultGallery.vue b/src/components/sidebar/tabs/queue/ResultGallery.vue
index 454d696231..1596a30c0d 100644
--- a/src/components/sidebar/tabs/queue/ResultGallery.vue
+++ b/src/components/sidebar/tabs/queue/ResultGallery.vue
@@ -13,7 +13,7 @@
     :showThumbnails="false"
   >
     <template #item="{ item }">
-      <img :src="item.url" alt="gallery item" class="galleria-image" />
+      <ComfyImage :key="item.url" :src="item.url" class="galleria-image" />
     </template>
   </Galleria>
 </template>
@@ -22,6 +22,7 @@
 import { defineProps, ref, watch, onMounted, onUnmounted } from 'vue'
 import Galleria from 'primevue/galleria'
 import { ResultItemImpl } from '@/stores/queueStore'
+import ComfyImage from '@/components/common/ComfyImage.vue'
 
 const galleryVisible = ref(false)
 
@@ -85,8 +86,10 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped>
-.galleria-image {
+<style>
+/* PrimeVue's galleria teleports the fullscreen gallery out of subtree so we
+cannot use scoped style here. */
+img.galleria-image {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
diff --git a/src/components/sidebar/tabs/queue/ResultItem.vue b/src/components/sidebar/tabs/queue/ResultItem.vue
index c0e9bbabaf..1769f029af 100644
--- a/src/components/sidebar/tabs/queue/ResultItem.vue
+++ b/src/components/sidebar/tabs/queue/ResultItem.vue
@@ -11,7 +11,7 @@
           rounded
         />
       </div>
-      <img :src="result.url" class="task-output-image" />
+      <ComfyImage :src="result.url" class="task-output-image" />
     </template>
     <!-- TODO: handle more media types -->
     <div v-else class="task-result-preview">
@@ -23,6 +23,7 @@
 
 <script setup lang="ts">
 import { ResultItemImpl } from '@/stores/queueStore'
+import ComfyImage from '@/components/common/ComfyImage.vue'
 import Button from 'primevue/button'
 import { onMounted, ref } from 'vue'
 
@@ -31,7 +32,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'preview', ResultItemImpl): void
+  (e: 'preview', result: ResultItemImpl): void
 }>()
 
 const resultContainer = ref<HTMLElement | null>(null)
@@ -57,7 +58,7 @@ onMounted(() => {
   align-items: center;
 }
 
-.task-output-image {
+:deep(.task-output-image) {
   width: 100%;
   height: 100%;
   object-fit: cover;
diff --git a/src/i18n.ts b/src/i18n.ts
index 574ce06106..5c7638a16e 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -2,6 +2,7 @@ import { createI18n } from 'vue-i18n'
 
 const messages = {
   en: {
+    imageFailedToLoad: 'Image failed to load',
     reconnecting: 'Reconnecting',
     reconnected: 'Reconnected',
     delete: 'Delete',
@@ -27,6 +28,7 @@ const messages = {
     }
   },
   zh: {
+    imageFailedToLoad: '图像加载失败',
     reconnecting: '重新连接中',
     reconnected: '已重新连接',
     delete: '删除',