Thumbhash images

packages/website/src/lib/htmlComponents/img.svelte

@@ -2,14 +2,23 @@
     export let src;
     export let alt;
     export let title;
-    let className = ""
+    export let thumb;
+    console.log("imgcmp", thumb);
+    let className = "";
     export { className as class };
     // console.log(src)
     // import _PastedImage20240716123726Png from "./Pasted%20image%2020240716123726.png?meta";
 </script>
 
 <figure class={className}>
-    <img {src} {alt} {title} />
+    <img
+        {src}
+        {alt}
+        {title}
+        width={thumb?.originalWidth}
+        height={thumb?.originalHeight}
+        style:background-image="url('{thumb?.thumbSrc}')"
+    />
     {#if title}
         <figcaption>{title}</figcaption>
     {/if}
@@ -18,6 +27,9 @@
 <style>
     img {
         max-height: 60vh;
+        background-size: cover;
+        width: auto;
+        height: auto;
         display: block;
         margin-inline: auto;
     }
@@ -25,8 +37,7 @@
         text-align: center;
     }
     figcaption {
-
         font-size: 0.95em;
-        margin-block: calc(var(--spacing)/2);
+        margin-block: calc(var(--spacing) / 2);
     }
 </style>