---
import type { ImageMetadata } from "astro";
import { Image } from "astro:assets";
// Props interface for the component
interface Props {
src: string;
alt: string;
width: number;
height: number;
loading?: "eager" | "lazy" | null | undefined;
decoding?: "async" | "auto" | "sync" | null | undefined;
fetchpriority?: "high" | "low" | "auto" | null | undefined;
format?: "auto" | "avif" | "jpeg" | "png" | "svg" | "webp";
class?: string;
style?: any;
}
// Destructuring Astro.props to get the component's props
let {
src,
alt,
width,
height,
loading,
decoding,
fetchpriority,
class: className,
format,
style,
} = Astro.props;
const images = import.meta.glob("src/assets/*.{jpeg,jpg,png,gif,svg,webp}");
// Check if the source path is valid
const isValidPath = images[src] ? true : false;
!isValidPath &&
console.error(
`\x1b[31mImage not found - ${src}.\x1b[0m Make sure the image is in the /src/assets folder.`,
);
---
{
isValidPath && (
<Image
src={images[src]() as Promise<{ default: ImageMetadata }>}
alt={alt}
width={width}
height={height}
loading={loading}
decoding={decoding}
fetchpriority={fetchpriority}
class={className}
format={format}
style={style}
/>
)
}