Saltearse al contenido

Importa imágenes dinámicamente

Las Imágenes locales deben ser importadas en archivos .astro para poder mostrarlas. Habrá momentos en los que querrás o necesitarás importar dinámicamente las rutas de tus imágenes en lugar de importar explícitamente cada imagen individualmente.

En esta receta, aprenderás a importar dinámicamente tus imágenes usando la función import.meta.glob de Vite. Construirás un componente de tarjeta que muestra el nombre, la edad y la foto de una persona.

  1. Crea un nuevo directorio assets dentro del directorio src y agrega tus imágenes dentro de ese nuevo directorio.
  • Directoriosrc/
    • Directorioassets/
      • avatar-1.jpg
      • avatar-2.png
      • avatar-3.jpeg
  1. Crea un nuevo componente de Astro para tu tarjeta e importa el componente <Image />.

    src/components/MyCustomCardComponent.astro
    ---
    import { Image } from 'astro:assets';
    ---
  2. Especifica las props que recibirá tu componente para mostrar la información necesaria en cada tarjeta. Opcionalmente puedes definir sus tipos, si estás usando TypeScript en tu proyecto.

    src/components/MyCustomCardComponent.astro
    ---
    import { Image } from 'astro:assets';
    interface Props {
    imagePath: string;
    altText: string;
    name: string;
    age: number;
    }
    const { imagePath, altText, name, age } = Astro.props;
    ---
  3. Crea una nueva variable images y usa la función import.meta.glob que devuelve un objeto con todas las rutas de las imágenes dentro de la carpeta assets.

    src/components/MyCustomCardComponent.astro
    ---
    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}')
    ---
  4. Usa las props para crear el marcado de tu componente de tarjeta.

    src/components/MyCustomCardComponent.astro
    ---
    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>Edad: {age}</p>
    <Image src={} alt={altText} />
    </div>
  5. Dentro del atributo src, pasa el objeto images y usa la notación de corchetes para la ruta de la imagen. Luego asegúrate de invocar la función glob.

    src/components/MyCustomCardComponent.astro
    ---
    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>Edad: {age}</p>
    <Image src={images[imagePath]()} alt={altText} />
    </div>
  1. Importa y usa el componente de tarjeta dentro de una página de Astro, pasando los valores de las props.

    src/pages/index.astro
    ---
    import MyCustomCardComponent from '../components/MyCustomCardComponent.astro';
    ---
    <MyCustomCardComponent
    imagePath="/src/assets/avatar-1.jpg"
    altText="Un retrato de Priya sobre un fondo de ladrillo."
    altText=""
    name="Priya"
    age={25}
    />