ayo/elk
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fallback on error

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
components/common/CommonBlurhash.ts
View file

@ -17,7 +17,7 @@ export default defineComponent({
required: false, required: false,
}, },
}, },
setup(props, { attrs }) { setup(props, { attrs, emit }) {
const placeholderSrc = ref<string>() const placeholderSrc = ref<string>()
const isLoaded = ref(false) const isLoaded = ref(false)
@ -26,6 +26,9 @@ export default defineComponent({
img.onload = () => { img.onload = () => {
isLoaded.value = true isLoaded.value = true
} }
img.onerror = (ev) => {
emit('onerror', ev)
}
img.src = props.src img.src = props.src
if (props.srcset) if (props.srcset)
img.srcset = props.srcset img.srcset = props.srcset

7
components/status/StatusPreviewCard.vue
View file

@ -12,8 +12,9 @@ const cardImage = $computed(() => props.card.image)
const alt = $computed(() => `${props.card.title} - ${props.card.title}`) const alt = $computed(() => `${props.card.title} - ${props.card.title}`)
const isSquare = $computed(() => props.smallPictureOnly || props.card.width === props.card.height) 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 providerName = $computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname)
const useFallback = ref(false)
const imageSrcset = $computed(() => props.card.image 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" :width="card.width"
:height="card.height" :height="card.height"
:alt="alt" :alt="alt"
w-full h-full object-cover w-full
h-full object-cover
@onerror="useFallback = true"
/> />
</div> </div>
<div <div