fix: images in remotes

src/components/Image.astro

@@ -1,6 +1,7 @@
 ---
 import type { ImageMetadata } from "astro";
 import { Picture as AstroImage } from "astro:assets";
+import { inferRemoteSize } from 'astro/assets/utils';
 import { generateThumbHash, getExifData } from "@helpers/image";
 import sharp from "sharp";
 interface Props {
@@ -14,14 +15,16 @@ interface Props {
   maxWidth?: number;
 }
 
-async function checkImage(src: string) {
+async function checkImage(image: ImageMetadata) {
+  const src = image.src;
   try {
     if (src.startsWith("/@fs") || src.startsWith("/_astro")) return true;
-    const res = await sharp(src).metadata();
+    const res = await inferRemoteSize(src);
     if (res.format) {
+      image.format = res.format;
       return true;
     }else {
-      console.log("Failed to fetch: ", src);
+      console.log("Failed to load: ", src);
     }
     return false;
   } catch (err) {
@@ -39,8 +42,8 @@ const {
   maxWidth,
 } = Astro.props;
 
-let thumbhash = hash && image.fsPath ? await generateThumbHash(image) : "";
-const imageOk = await checkImage(image.src);
+let thumbhash = hash && await generateThumbHash(image);
+const imageOk = await checkImage(image);
 
 let exif = imageOk && (await getExifData(image));
 
@@ -81,5 +84,5 @@ const sizes = [
         .join(", ")}>
       <slot />
     </AstroImage>
-    ) : "Image not ok"
+    ) : undefined
 }