Add error message when loading images

wbbaker · Sep 7, 2023 · 19a7f39 · 19a7f39
1 parent 85030a1
commit 19a7f39
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/src/components/Gallery/GalleryMainImage.vue b/src/components/Gallery/GalleryMainImage.vue
@@ -3,7 +3,12 @@
     <ClientOnly>
       <VSpinner v-if="isLoading" />
     </ClientOnly>
+    <span
+      v-if="errorMessage"
+      v-text="errorMessage"
+    />
     <img
+      v-show="!errorMessage"
       ref="imageElement"
       class="max-h-80 h-max w-100 cursor-zoom-in m-auto object-contain"
       :src="image.original"
@@ -26,17 +31,31 @@ const emit = defineEmits(['open:viewer'])
 
 const isLoading = ref(false)
 const imageElement = ref(null)
+const errorMessage = ref(null)
 
 watch(
   () => props.image,
   (newVal) => {
-    if (newVal.id) {
+    if (newVal.original) {
+      errorMessage.value = null
       isLoading.value = true
     }
   }
 )
 
+function handleError(e) {
+  e.preventDefault()
+
+  isLoading.value = false
+  errorMessage.value = 'Image was not found or format is not supported'
+}
+
+function handleLoad() {
+  isLoading.value = false
+}
+
 onMounted(() => {
-  imageElement.value.addEventListener('load', () => (isLoading.value = false))
+  imageElement.value.addEventListener('load', handleLoad)
+  imageElement.value.addEventListener('error', handleError)
 })
 </script>
diff --git a/src/components/ImageViewer/ImageViewer.global.vue b/src/components/ImageViewer/ImageViewer.global.vue
@@ -10,7 +10,13 @@
         class="absolute rounded-t-lg w-auto max-h-full h-auto top-12 bottom-44 left-0 right-0 flex justify-center align-middle"
       >
         <VSpinner v-if="isLoading" />
+        <div
+          class="flex flex-col justify-center"
+          v-if="errorMessage"
+          v-text="errorMessage"
+        />
         <img
+          v-show="!errorMessage"
           ref="imageElement"
           class="mx-auto cursor-zoom-out w-auto max-w-full max-h-full h-auto my-auto"
           :alt="image.depictions.map((d) => d.label).join(';')"
@@ -125,12 +131,23 @@ const handleKeyboard = ({ key }) => {
 
 const imageElement = ref(null)
 const isLoading = ref(false)
+const errorMessage = ref(null)
 const image = computed(() => props.images[props.index])
 
 document.addEventListener('keyup', handleKeyboard)
 
+function handleError() {
+  isLoading.value = false
+  errorMessage.value = 'Image was not found or format is not supported'
+}
+
+function handleLoad() {
+  isLoading.value = false
+}
+
 onMounted(() => {
-  imageElement.value.addEventListener('load', () => (isLoading.value = false))
+  imageElement.value.addEventListener('load', handleLoad)
+  imageElement.value.addEventListener('error', handleError)
   document.body.classList.add('overflow-hidden')
 })
 
@@ -141,6 +158,9 @@ onUnmounted(() => {
 
 watch(
   () => props.index,
-  () => (isLoading.value = true)
+  () => {
+    errorMessage.value = null
+    isLoading.value = true
+  }
 )
 </script>