diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue index 716bb83d..bcc88a43 100644 --- a/components/status/StatusPreviewCard.vue +++ b/components/status/StatusPreviewCard.vue @@ -12,7 +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 imageSrcset = $computed(() => props.card.image ? `${props.card.image}, /api/og-image/${encodeURIComponent(props.card.url)} 2x` : '') +const imageSrcset = $computed(() => props.card.image + ? `${props.card.image}, /api/og-image/${encodeURIComponent(props.card.url)}?fallbackUrl=${encodeURIComponent(props.card.image)} 2x` + : '') // TODO: handle card.type: 'photo' | 'video' | 'rich'; diff --git a/server/api/og-image/[url].ts b/server/api/og-image/[url].ts index b9365b34..36e0d746 100644 --- a/server/api/og-image/[url].ts +++ b/server/api/og-image/[url].ts @@ -37,6 +37,7 @@ async function resolveOgImageUrlManually(cardUrl: string): Promise { export default defineEventHandler(async (event) => { const { url } = getRouterParams(event) + const { fallbackUrl } = getQuery(event) const cardUrl = decodeURIComponent(url) @@ -77,7 +78,7 @@ export default defineEventHandler(async (event) => { if (!ogImageUrl) { // If nothing helped, set cardUrl as default - ogImageUrl = cardUrl + ogImageUrl = decodeURIComponent(fallbackUrl as string) } await sendRedirect(event, ogImageUrl)