feat: image re-usable component with fallback

Author: moonlitgrace

frontend/src/lib/components/ui/image.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { cn } from '$lib/functions/classnames';
+
+  type Props = {
+    src?: string | null;
+    class?: string;
+  };
+
+  let { src, class: klass }: Props = $props();
+
+  let valid_src = $state(false);
+
+  const object_classes: string[] = [];
+  let _klass = klass
+    ?.split(/\s+/)
+    .filter((cls) => {
+      if (cls.startsWith('object-')) {
+        object_classes.push(cls);
+        return false;
+      }
+      return true;
+    })
+    .join(' ');
+
+  $effect.pre(() => {
+    if (!src) {
+      valid_src = false;
+      return;
+    }
+    // create img instance
+    const img = new Image();
+    img.onload = () => (valid_src = true);
+    img.onerror = () => (valid_src = false);
+    img.src = src;
+  });
+</script>
+
+<div class={cn(_klass, 'grid place-items-center overflow-hidden bg-neutral')}>
+  {#if valid_src}
+    <img {src} alt="" class={cn('h-full w-full', ...object_classes)} />
+  {:else}
+    <svg
+      class="w-10 text-neutral-content"
+      viewBox="0 0 157 86"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M143.6 13L113.366 43L143.6 73M13 13L43.2344 43L13 73"
+        stroke="currentColor"
+        stroke-width="25"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  {/if}
+</div>

frontend/src/routes/(app)/q/[name]/+page.svelte

@@ -8,6 +8,7 @@
   import { createAuthStore } from '$lib/stores/auth.svelte';
   import { onMount } from 'svelte';
   import { createSidebarStore } from '$lib/stores/sidebar.svelte';
+  import Image from '$lib/components/ui/image.svelte';
 
   const { data }: { data: PageData } = $props();
   const { quiblet, quibs, highlighted_quibs } = data;
@@ -40,13 +41,10 @@
 </svelte:head>
 
 <div class="relative">
-  <div
-    class={cn(
-      !quiblet?.banner ? 'h-24 bg-neutral' : 'h-40 bg-cover bg-center',
-      'w-full rounded-2xl'
-    )}
-    style="background-image: url({quiblet?.banner});"
-  ></div>
+  <Image
+    src={quiblet?.banner}
+    class={cn(quiblet?.banner ? 'h-40 object-cover object-center' : 'h-24', 'rounded-2xl')}
+  />
   <div class="absolute inset-x-0 -bottom-12 flex items-end justify-between px-4">
     <div class="flex items-end gap-2">
       <Avatar class="!size-20 outline outline-8 outline-base-300" src={quiblet?.avatar} />