Props image

[humble tendon]

I want to be able to pass imported image into an astro component through Props. What's the correct type to use in Props for it?

[shrewd sage]

Hi @humble tendon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To pass an imported image into an Astro component through props, you should use the ImageMetadata type from Astro. Here's how to properly type your component props:

---
import type { ImageMetadata } from 'astro';

interface Props {
  image: ImageMetadata;
  alt: string;
}

const { image, alt } = Astro.props;
---

<Image src={image} alt={alt} />

The ImageMetadata interface includes the following properties:

• src: string
• width: number
• height: number
• format: string

This type works for local images that you import in your Astro files. If you need to support both local imported images and remote image URLs, you can use a union type:

interface Props {
  image: ImageMetadata | string;
  alt: string;
}

You can see this pattern used in several Astro components in the documentation, such as in the custom image components for Markdoc and in custom image component recipes.

When dynamically importing images, you might also see this type pattern:

const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}');

This is used when you need to dynamically import images based on paths provided at runtime.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@humble tendon Kapa.ai is still learning and improving, please let me know how I did by reacting below.