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 individual.

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.

Receta

Sección titulada Receta

1. Crea un nuevo directorio assets dentro del directorio src y agrega tus imágenes dentro de ese nuevo directorio.

• Directorysrc/

  • Directoryassets/

    • avatar-1.jpg
    • avatar-2.png
    • avatar-3.jpeg

Nota

assets es un nombre de carpeta popular para colocar imágenes, pero eres libre de nombrar la carpeta como quieras.

2. Crea un nuevo componente de Astro para tu tarjeta e importa el componente <Image />.

   src/components/MyCustomCardComponent.astro

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

3. 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;
   ---

4. 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. También necesitarás importar el tipo ImageMetadata para definir el tipo de la variable images.

   src/components/MyCustomCardComponent.astro

   ---
   import type { ImageMetadata } from '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<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
   ---

5. Usa las props para crear el marcado de tu componente de tarjeta.

src/components/MyCustomCardComponent.astro

---
import type { ImageMetadata } from '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<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}');
---
<div class="card">
    <h2>{name}</h2>
    <p>Age: {age}</p>
    <Image src={} alt={altText} />
</div>

6. 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. Dado que estás accediendo al objeto images que tiene un tipo desconocido, también deberías arrojar throw un error en caso de que se pase una ruta de archivo inválida como prop.

src/components/MyCustomCardComponent.astro

---
import type { ImageMetadata } from '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<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}');
if (!images[imagePath]) throw new Error(`"${imagePath}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`);
---
<div class="card">
    <h2>{name}</h2>
    <p>Edad: {age}</p>
    <Image src={images[imagePath]()} alt={altText} />
</div>

Nota

images es un objeto que contiene todas las rutas de las imágenes dentro de la carpeta assets.

const images = {
  './assets/avatar-1.jpg': () => import('./assets/avatar-1.jpg'),
  './assets/avatar-2.png': () => import('./assets/avatar-2.png'),
  './assets/avatar-3.jpeg': () => import('./assets/avatar-3.jpeg')
}

La prop imagePath es una cadena que contiene la ruta de la imagen que quieres mostrar. La función import.meta.glob() está haciendo el trabajo de encontrar la ruta de la imagen que coincide con la prop imagePath y maneja la importación por ti.

7. 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}
   />