27 lines
724 B
Vue
27 lines
724 B
Vue
 
|
<template>
|
||
|
|
<img
|
||
|
|
v-if="src && !failed"
|
||
|
|
ref="imgEl"
|
||
|
|
:src="src"
|
||
|
|
:alt="alt"
|
||
|
|
loading="lazy"
|
||
|
|
decoding="async"
|
||
|
|
@error="failed = true"
|
||
|
|
>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
/** Lazy image that removes itself on load failure so a broken-image icon never shows inside the design. */
|
||
|
|
const props = defineProps<{ src?: string | null; alt: string }>();
|
||
|
|
const failed = ref(false);
|
||
|
|
const imgEl = ref<HTMLImageElement | null>(null);
|
||
|
|
|
||
|
|
watch(() => props.src, () => (failed.value = false));
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
// A server-rendered image can fail before hydration attaches the error listener.
|
||
|
|
const img = imgEl.value;
|
||
|
|
if (img && img.complete && img.naturalWidth === 0) failed.value = true;
|
||
|
|
});
|
||
|
|
</script>
|