Importar imágenes dinámicamente

Las images locales deben importarse en los archivos .astro para poder mostrarlas. Habrá veces en las 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 cómo importar dinámicamente tus imágenes usando la función import.meta.glob de Vite. Construirás un componente de tarjeta que muestre el nombre, la edad y la foto de una persona.

Receta

Crea una nueva carpeta assets bajo el directorio src y añade tus imágenes dentro de esa nueva carpeta.
- Directoriosrc/
  - Directorioassets/
    avatar-1.jpg
    avatar-2.png
    avatar-3.jpeg
assets es una convención popular de nombres de carpeta para colocar imágenes, pero eres libre de nombrar la carpeta como quieras.
Crea un nuevo componente de Astro para tu tarjeta e importa el componente <Image />.
src/components/MyCustomCardComponent.astro
```
---
import { Image } from 'astro:assets';
---
```
Especifica las props que tu componente recibirá 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;
---
```

Crea una nueva variable images y usa la función import.meta.glob que devuelve un objeto con todas las rutas de imágenes dentro de la carpeta assets. También necesitarás importar el tipo ImageMetadata para ayudar a definir el tipo de la variable images.

---
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}')
---

Usa las props para crear el markup de tu componente de tarjeta.

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

Dentro del atributo src, pasa el objeto images y usa 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 throw un error en caso de que se pase una ruta de archivo inválida como prop.

---
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>Age: {age}</p>
    <Image src={images[imagePath]()} alt={altText} />
</div>

images es un objeto que contiene todas las rutas de 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 un string que contiene la ruta a la imagen que quieres mostrar. import.meta.glob() hace el trabajo de encontrar la ruta de la imagen que coincide con la prop imagePath y manejar el import por ti.

Importa y usa el componente de tarjeta dentro de una página de Astro, pasando los valores de las 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}
/>

Contribuir Comunidad Patrocinar