feat: add public image read boundary

apps/web/src/components/molecules/ImageGallery.stories.js

@@ -8,4 +8,19 @@ export const ContainedMuseumStage = {
       { id: 'back', label: 'BACK', alt: 'Back of Charizard ex' },
     ],
   },
+};
+
+export const WithPublicImageUrls = {
+  args: {
+    images: [
+      { id: 'front', src: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="640" height="480"%3E%3Crect width="100%" height="100%" fill="%23d9e2ef"/%3E%3Ctext x="50%" y="50%" text-anchor="middle" fill="%231761ff" font-size="42"%3EFRONT%3C/text%3E%3C/svg%3E', alt: 'Front of Charizard ex' },
+      { id: 'back', label: 'BACK', alt: 'Back of Charizard ex' },
+    ],
+  },
+};
+
+export const BrokenImageFallback = {
+  args: {
+    images: [{ id: 'broken', src: '/fixtures/missing-image.webp', alt: 'Unavailable collectible image' }],
+  },
 };

apps/web/src/components/molecules/ImageGallery.vue

@@ -5,13 +5,18 @@ const props = defineProps({
   images: { type: Array, required: true },
 });
 const selectedIndex = ref(0);
+const failedImages = ref(new Set());
+
+function markFailed(imageId) {
+  failedImages.value = new Set(failedImages.value).add(imageId);
+}
 </script>
 
 <template>
   <div class="image-gallery">
     <div class="image-gallery__stage">
-      <img v-if="props.images[selectedIndex]?.src" :src="props.images[selectedIndex].src" :alt="props.images[selectedIndex].alt" />
-      <span v-else class="image-gallery__placeholder" aria-label="No collectible image available">{{ props.images[selectedIndex]?.label ?? 'IMAGE' }}</span>
+      <img v-if="props.images[selectedIndex]?.src && !failedImages.has(props.images[selectedIndex].id)" :src="props.images[selectedIndex].src" :alt="props.images[selectedIndex].alt" @error="markFailed(props.images[selectedIndex].id)" />
+      <span v-else class="image-gallery__placeholder" role="img" :aria-label="props.images[selectedIndex]?.src ? 'Collectible image unavailable' : 'No collectible image available'">{{ props.images[selectedIndex]?.src ? 'IMAGE UNAVAILABLE' : (props.images[selectedIndex]?.label ?? 'IMAGE') }}</span>
     </div>
     <div v-if="props.images.length > 1" class="image-gallery__controls" aria-label="Gallery images">
       <button v-for="(image, index) in props.images" :key="image.id" :class="{ 'image-gallery__thumb--selected': index === selectedIndex }" type="button" :aria-label="`Show image ${index + 1}: ${image.alt}`" @click="selectedIndex = index">

apps/web/src/pages/ListingDetailPage.vue

@@ -33,6 +33,7 @@ onMounted(async () => {
       :price-minor="listing.askingPriceMinor"
       :condition="listing.conditionId"
       :description="listing.notes"
+      :images="listing.images"
     />
   </main>
 </template>

apps/web/src/pages/ProductDetailPage.vue

@@ -30,6 +30,7 @@ onMounted(async () => {
       v-else-if="product"
       :title="product.name"
       :description="product.description"
+      :images="product.images"
       :facts="[
         ...(product.brand ? [{ label: 'Brand', value: product.brand }] : []),
         ...(product.setName ? [{ label: 'Set', value: product.setName }] : []),