mohmdsdgandCursor
29579f80d3
The live product stream was replacing the catalog with an older payload, so the new photo flashed then jumped back. Keep the newer file_id and stop resetting the img on unrelated price ticks. Co-authored-by: Cursor <cursoragent@cursor.com>
67 lines
1.3 KiB
Vue
67 lines
1.3 KiB
Vue
<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
|
|
}
|
|
)
|
|
|
|
function productImageKey(product?: ProductImageSource): string {
|
|
return [
|
|
product?.file_id ?? '',
|
|
product?.file?.id ?? '',
|
|
product?.file?.full_src ?? '',
|
|
product?.file?.src ?? '',
|
|
product?.file?.url ?? '',
|
|
product?.img ?? '',
|
|
].join('|')
|
|
}
|
|
|
|
const currentSrc = ref(resolveProductImageSrc(props.product))
|
|
const usingFallback = ref(false)
|
|
|
|
watch(
|
|
() => productImageKey(props.product),
|
|
() => {
|
|
usingFallback.value = false
|
|
currentSrc.value = resolveProductImageSrc(props.product)
|
|
},
|
|
)
|
|
|
|
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>
|