feat: serve responsive image variants

2026-09-08 22:09:30 -04:00
parent dd8af7c140
commit 9704c2db02
5 changed files with 33 additions and 7 deletions
@@ -15,7 +15,7 @@ function markFailed(imageId) {
 <template>
  <div class="image-gallery">
    <div class="image-gallery__stage">
-      <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)" />
+      <img v-if="(props.images[selectedIndex]?.src ?? props.images[selectedIndex]?.url) && !failedImages.has(props.images[selectedIndex].id)" :src="props.images[selectedIndex].src ?? props.images[selectedIndex].url" :alt="props.images[selectedIndex].altText ?? 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">