<template>
    <span>
        <img v-show="src && !fallback" @load="hideFallback" @error="showFallback" :src="src" :width="width" :height="height" />
        <span v-show="!src || fallback"><slot></slot></span>
    </span>
</template>

<script setup lang="ts">
const props = defineProps({
    src: {
        type: String,
    },
    width: {
        type: Number,
    },
    height: {
        type: Number,
    }
});

const fallback = ref(false);

const showFallback = () => toggleFallback(true);
const hideFallback = () => toggleFallback(false);

function toggleFallback(toggle: boolean): void
{
    console.log("Something happened")
    fallback.value = toggle;
}
</script>