27 lines
874 B
Vue
27 lines
874 B
Vue
<script setup lang="ts">
|
|
/**
|
|
* Renders a product's artwork. Seeded products carry an image path
|
|
* (`/art/product-*.webp`); admin-created products may have no image, in which
|
|
* case the previous emoji/placeholder fallback is kept so nothing regresses.
|
|
*/
|
|
defineProps<{ image?: string | null; alt: string; eager?: boolean }>();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="overflow-hidden rounded-xl border"
|
|
:class="image && image.startsWith('/') ? '' : 'flex items-center justify-center'"
|
|
:style="{ borderColor: 'var(--border)', background: 'var(--surface-muted)' }"
|
|
>
|
|
<img
|
|
v-if="image && image.startsWith('/')"
|
|
:src="image"
|
|
:alt="alt"
|
|
:loading="eager ? 'eager' : 'lazy'"
|
|
decoding="async"
|
|
class="h-full w-full object-cover"
|
|
>
|
|
<span v-else aria-hidden class="text-5xl">{{ image ?? '📦' }}</span>
|
|
</div>
|
|
</template>
|