store 6

src/components/ProductImage.vue

@@ -0,0 +1,56 @@
+<template>
+  <img
+    :src="currentSrc"
+    :class="[imgClass, dimmed && 'product-image--dimmed']"
+    :alt="alt"
+    @error="handleError"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import {
+  getProductFallbackImage,
+  resolveProductImageSrc,
+  type ProductImageSource
+} from '@/utils/productImage'
+
+const props = withDefaults(
+  defineProps<{
+    product?: ProductImageSource
+    imgClass?: string
+    alt?: string
+    dimmed?: boolean
+  }>(),
+  {
+    imgClass: 'max-h-full max-w-full object-contain',
+    alt: '',
+    dimmed: false
+  }
+)
+
+const currentSrc = ref(resolveProductImageSrc(props.product))
+const usingFallback = ref(false)
+
+watch(
+  () => props.product,
+  (product) => {
+    usingFallback.value = false
+    currentSrc.value = resolveProductImageSrc(product)
+  },
+  { deep: true }
+)
+
+function handleError() {
+  if (usingFallback.value) return
+  usingFallback.value = true
+  currentSrc.value = getProductFallbackImage(props.product)
+}
+</script>
+
+<style scoped>
+.product-image--dimmed {
+  opacity: 0.45;
+  filter: grayscale(1);
+}
+</style>