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

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

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

  let loaded = src ? 0 : generatedImage ? 1 : 2;

  // onMount(() => {
  //   const img = new Image();
  //   console.log(src)
  //   img.src = src ?? `/api/images/${generatedImage}`;
  //   console.log(img.src)
  //   img.onerror = () => {
  //     loaded = 2;
  //   };
  // })
</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}