1 files changed, 23 insertions, 10 deletions
diff --git a/src/lib/Image/FallbackImage.svelte b/src/lib/Image/FallbackImage.svelte
index 2029cf0e..1eafdd4c 100644
--- a/src/lib/Image/FallbackImage.svelte
+++ b/src/lib/Image/FallbackImage.svelte
@@ -1,14 +1,27 @@
 <script lang="ts">
-  export let source: string | undefined | null;
-  export let alternative: string | undefined | null;
-  export let fallback: string | undefined | null;
-  export let maxReplaceCount = 1;
-  export let replaceDelay = 1000;
-  export let error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg';
-  export let hideOnError = false;
-  export let style = '';
+  interface Props {
+    source: string | undefined | null;
+    alternative: string | undefined | null;
+    fallback: string | undefined | null;
+    maxReplaceCount?: number;
+    replaceDelay?: number;
+    error?: string;
+    hideOnError?: boolean;
+    style?: string;
+  }
+
+  let {
+    source,
+    alternative,
+    fallback,
+    maxReplaceCount = 1,
+    replaceDelay = 1000,
+    error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg',
+    hideOnError = false,
+    style = ''
+  }: Props = $props();
 
-  let replaceCount = 0;
+  let replaceCount = $state(0);
 
   const delayedReplace = (event: Event, image: string | undefined | null) => {
     if (replaceCount >= maxReplaceCount) return;
@@ -27,7 +40,7 @@
     alt={alternative}
     loading="lazy"
     class="badge"
-    on:error={(e) => delayedReplace(e, fallback)}
+    onerror={(e) => delayedReplace(e, fallback)}
     {style}
   />
 {:else if !hideOnError}