--- import type { ImageMetadata } from "astro"; import { Picture as AstroImage } from "astro:assets"; import { generateThumbHash, getExifData } from "@helpers/image"; interface Props { src: ImageMetadata & { fsPath?: string }; alt: string; pictureClass?: string; class?: string; caption?: string; hash?: boolean; loader?: boolean; maxWidth?: number; } const { src: image, loader = true, pictureClass = "", hash = true, alt, maxWidth, } = Astro.props; let thumbhash = hash && image.fsPath ? await generateThumbHash(image) : ""; let exif = await getExifData(image); const sizes = [ { width: 240, media: "(max-width: 360px)", }, { width: 540, media: "(max-width: 720px)", }, { width: 720, media: "(max-width: 1600px)", }, { width: image.width, }, ].filter((size) => !maxWidth || size.width <= maxWidth); --- size.width)} sizes={sizes .map((size) => `${size.media || "100vw"} ${size.width}px`) .join(", ")}>