fallback on error
This commit is contained in:
parent
200bc3d3f1
commit
e18443ab6f
@ -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
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user