keyed loop of cards

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Icon from "@iconify/svelte";
+	import { onMount } from "svelte";
 
   export let src: string | null | undefined;
   export let className: string;
@@ -7,6 +8,16 @@
   export let alt: string | undefined;
 
   let loaded = src ? 0 : 1
+
+  // 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 -->

src/routes/models/+layout.svelte

@@ -160,7 +160,7 @@
 		</div>
 	</div>
 	<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-4 gap-5 mt-8 lg:mt-10">
-		{#each data.models as card}
+		{#each data.models as card (card.id)}
 			<Card card={card} />
 		{/each}
 		{#if data.models.length === 0}