Dynamically Import Images

Local images must be imported into .astro files in order to display them. There will be times where you will want or need to dynamically import the image paths of your images instead of explicitly importing each individual image.

In this recipe, you will learn how to dynamically import your images using Vite’s import.meta.glob function. You will build a card component that displays the name, age, and photo of a person.

1. Create a new assets folder under the src directory and add your images inside that new folder.

2. Create a new Astro component for your card and import the <Image /> component.

   ---
    import { Image } from 'astro:assets';
   ---

3. Specify the props that your component will receive in order to display the necessary information on each card. You can optionally define their types, if you are using TypeScript in your project.

   ---
    import { Image } from 'astro:assets';
   
    interface Props {
       imagePath: string;
       altText: string;
       name: string;
       age: number;
    }
   
    const { imagePath, altText, name, age } = Astro.props;
   ---

4. Create a new images variable and use the import.meta.glob function which returns an object of all of the image paths inside the assets folder.

   ---
    import { Image } from 'astro:assets';
   
    interface Props {
       imagePath: string;
       altText: string;
       name: string;
       age: number;
    }
   
    const { imagePath, altText, name, age } = Astro.props;
    const images = import.meta.glob('/src/assets/*.{jpeg,jpg,png,gif}')
   ---

5. Use the props to create the markup for your card component.

   ---
    import { Image } from 'astro:assets';
   
    interface Props {
       imagePath: string;
       altText: string;
       name: string;
       age: number;
    }
   
    const { imagePath, altText, name, age } = Astro.props;
    // Type: Record<string, () => Promise<{default: ImageMetadata}>>
    const images = import.meta.glob('/src/assets/*.{jpeg,jpg,png,gif}')
   ---
   <div class="card">
       <h2>{name}</h2>
       <p>Age: {age}</p>
       <Image src={} alt={altText} />
   </div>

6. Inside the src attribute, pass in the images object and use bracket notation for the image path. Then make sure to invoke the glob function.

   ---
    import { Image } from 'astro:assets';
   
    interface Props {
       imagePath: string;
       altText: string;
       name: string;
       age: number;
    }
   
    const { imagePath, altText, name, age } = Astro.props;
    const images = import.meta.glob('/src/assets/*.{jpeg,jpg,png,gif}')
   ---
   <div class="card">
       <h2>{name}</h2>
       <p>Age: {age}</p>
       <Image src={images[imagePath]()} alt={altText} />
   </div>

7. Import and use the card component inside an Astro page, passing in the values for the props.

   ---
   import MyCustomCardComponent from '../components/MyCustomCardComponent.astro';
   ---
   <MyCustomCardComponent
       imagePath="/src/assets/avatar-1.jpg"
       altText="A headshot of Priya against a brick wall background."
       name="Priya"
       age={25}
   />

More recipes