--- import type { ImageMetadata } from "astro"; import { Picture as AstroImage } from "astro:assets"; interface Props { src: ImageMetadata; alt: string; class?: string; caption?: string; maxWidth?: number; } const { src: image, alt, maxWidth } = Astro.props; console.log({ image, alt, maxWidth }); 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(", ")} />