1
0

fallback on error

This commit is contained in:
Shinigami92 2022-12-12 23:07:56 +01:00
parent 200bc3d3f1
commit e18443ab6f
2 changed files with 9 additions and 3 deletions

View File

@ -17,7 +17,7 @@ export default defineComponent({
required: false,
},
},
setup(props, { attrs }) {
setup(props, { attrs, emit }) {
const placeholderSrc = ref<string>()
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

View File

@ -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"
/>
</div>
<div