From e18443ab6f12b308617370b62dd49835a26c35e4 Mon Sep 17 00:00:00 2001 From: Shinigami92 Date: Mon, 12 Dec 2022 23:07:56 +0100 Subject: [PATCH] fallback on error --- components/common/CommonBlurhash.ts | 5 ++++- components/status/StatusPreviewCard.vue | 7 +++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/components/common/CommonBlurhash.ts b/components/common/CommonBlurhash.ts index b9b76d27..23a601ab 100644 --- a/components/common/CommonBlurhash.ts +++ b/components/common/CommonBlurhash.ts @@ -17,7 +17,7 @@ export default defineComponent({ required: false, }, }, - setup(props, { attrs }) { + setup(props, { attrs, emit }) { const placeholderSrc = ref() const isLoaded = ref(false) @@ -26,6 +26,9 @@ export default defineComponent({ img.onload = () => { isLoaded.value = true } + img.onerror = (ev) => { + emit('onerror', ev) + } img.src = props.src if (props.srcset) img.srcset = props.srcset diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue index fe865a4e..0b155e8d 100644 --- a/components/status/StatusPreviewCard.vue +++ b/components/status/StatusPreviewCard.vue @@ -12,8 +12,9 @@ const cardImage = $computed(() => props.card.image) const alt = $computed(() => `${props.card.title} - ${props.card.title}`) const isSquare = $computed(() => props.smallPictureOnly || props.card.width === props.card.height) const providerName = $computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname) +const useFallback = ref(false) const imageSrcset = $computed(() => props.card.image - ? `${props.card.image}, /api/og-image/${encodeURIComponent(props.card.url)} 2x` + ? `${props.card.image}${useFallback.value ? '' : `, /api/og-image/${encodeURIComponent(props.card.url)} 2x`}` : '', ) @@ -51,7 +52,9 @@ const imageSrcset = $computed(() => props.card.image :width="card.width" :height="card.height" :alt="alt" - w-full h-full object-cover + w-full + h-full object-cover + @onerror="useFallback = true" />