image weirdness

src/lib/components/Image.svelte

@@ -1,16 +1,44 @@
 <script lang="ts">
-  import { Image } from "@unpic/svelte";
   import { blurhashToCssGradientString } from "@unpic/placeholder";
 
-  export let blurhash: string | undefined = undefined;
+  export let alt: string;
+  export let src: string;
+  export let width: string | null | undefined = undefined;
+  export let height: string | null | undefined = undefined;
+  export let blurhash: string | null | undefined = undefined;
+  export let priority: boolean = false;
 
-  let background: string | undefined = undefined;
+  let props: any = $$restProps;
 
   $: {
-    if (blurhash) {
-      background = blurhashToCssGradientString(blurhash);
-    }
+      if (priority) {
+          props.loading ||= "eager";
+          props.fetchpriority ||= "high";
+      } else {
+          props.loading ||= "lazy";
+          props.decoding ||= "async";
+      }
+
+      if (props.alt === "") {
+          props.role ||= "presentation";
+      }
+
+      let style = '';
+
+      if (width) {
+          style += `width: ${width};`;
+      }
+      if (height) {
+          style += `height: ${height};`;
+      }
+
+      if (blurhash) {
+          let bg = blurhashToCssGradientString(blurhash);
+          style += `background-image: ${bg};`;
+      }
+
+      props.style += style;
   }
 </script>
 
-<Image {background} width={500} height={281} {...$$restProps} />
+<img {src} {alt} {width} {height} {...props} on:error={null} />

src/routes/dashboard/vaccs/[id]/events/+page.svelte

@@ -40,8 +40,8 @@
       <Table.Row>
         <Table.Cell>
           <Image
-            width="500px"
-            height="281px"
+                  width="480px"
+            class="rounded"
             src={event.bannerUrl}
             blurhash={event.bannerBlurHash}
             alt={event.name} />

vite.config.ts

@@ -21,6 +21,7 @@ export default defineConfig({
       "jsonwebtoken",
       "@prisma/client",
       "marked",
+      "@unpic/placeholder"
     ],
   },
 });