fix: remove blurred placeholder images from behind loaded images

FRC3636 · Oct 20, 2024 · bed123c · bed123c
1 parent 4f74c5d
commit bed123c
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/src/components/Image.astro b/src/components/Image.astro
@@ -44,7 +44,7 @@ const svgUrl = `url("data:image/svg+xml;charset=utf-8,${getImageBlurSvg({
 
 <AstroImage
     {...Astro.props}
-    style=`--placeholder:${svgUrl};${Astro.props.style}`
+    style=`--placeholder:${svgUrl};${Astro.props.style ?? ""}`
     class:list={[{ placeholder: placeholder }, Astro.props["class:list"]]}
 />
 
@@ -61,9 +61,10 @@ const svgUrl = `url("data:image/svg+xml;charset=utf-8,${getImageBlurSvg({
 
 <script>
     const preloadImages =
-        document.querySelectorAll<HTMLImageElement>(".preload");
+        document.querySelectorAll<HTMLImageElement>(".placeholder");
     for (const image of preloadImages) {
         image.onload = () => {
+            console.log("loaded");
             image.style.setProperty("--placeholder", null);
         };
     }