diff --git a/src/components/Image.astro b/src/components/Image.astro
index fa4d2cf..4f8f8a9 100644
--- a/src/components/Image.astro
+++ b/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, getImageBuffer, getExifData } from "@helpers/image";
interface Props {
src: ImageMetadata & { fsPath?: string; src?: string };
@@ -13,6 +14,26 @@ interface Props {
maxWidth?: number;
}
+async function checkImage(image: ImageMetadata) {
+ const src = typeof image === "string" ? image : image.src;
+ if (!src) return false;
+ try {
+ if (src.startsWith("/@fs") || src.startsWith("/_astro")) return true;
+ const res = await inferRemoteSize(src);
+ if (res.format) {
+ image.format = res.format;
+ return true;
+ } else {
+ console.log("Failed to load: ", src);
+ }
+ return false;
+ } catch (err) {
+ console.log("\n");
+ console.log("Failed to fetch: ", src);
+ return false;
+ }
+}
+
const {
src: image,
loader = true,
@@ -22,7 +43,10 @@ const {
maxWidth,
} = Astro.props;
-const imageBuffer = await getImageBuffer(image);
+
+
+const imageOk = await checkImage(image);
+const imageBuffer = imageOk && await getImageBuffer(image);
let thumbhash = imageBuffer && (await generateThumbHash(imageBuffer));
let exif = imageBuffer && (await getExifData(imageBuffer));
@@ -45,19 +69,23 @@ const sizes = [
].filter((size) => !maxWidth || size.width <= maxWidth);
---
- size.width)}
- sizes={sizes
- .map((size) => `${size.media || "100vw"} ${size.width}px`)
- .join(", ")}>
-
-
+{
+ imageOk ? (
+ size.width)}
+ sizes={sizes
+ .map((size) => `${size.media || "100vw"} ${size.width}px`)
+ .join(", ")}>
+
+
+ ) : undefined
+}