src/lib/components/models/image/Image.svelte

<script lang="ts">
  import Icon from "@iconify/svelte";

  export let src: string | undefined;
  export let className: string;
  export let generatedImage: string | undefined;
  export let alt: string | undefined;

  let loaded = 0;
</script>

<!-- svelte-ignore a11y-img-redundant-alt -->
 {#if loaded === 2}
  <div class="{className} flex items-center flex-col justify-center text-white/50 text-xs">
    <Icon icon="mingcute:sad-fill" class="text-lg" />
    Not found
  </div>
  {:else}
    <img
      src={
        loaded === 0 ? src : `/api/images/${generatedImage}`
      }
      alt={alt}
      class="{className}"
      on:error={() => {
        loaded += 1;
      }}
    />
{/if}