Динамический импорт изображений

Локальные изображения должны быть импортированы в файлы .astro для их корректного отображения и оптимизации. Однако иногда требуется импортировать набор изображений динамически (например, на основе данных из пропсов), вместо явного импорта каждого файла вручную.

В этом рецепте мы научимся использовать функцию Vite import.meta.glob для создания компонента карточки, который отображает фото человека по переданному пути.

Инструкция

Организуйте папку с изображениями (например, src/assets/).
- Директорияsrc/
  - Директорияassets/
    avatar-1.jpg
    avatar-2.png

Создайте новый компонент и опишите его пропсы.

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

interface Props {
   imagePath: string; // Путь к файлу
   name: string;
   altText: string;
}

const { imagePath, name, altText } = Astro.props;

// Получаем список всех изображений из папки assets
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}');

// Проверяем существование файла
if (!images[imagePath]) throw new Error(`"${imagePath}" не найден в каталоге assets.`);
---
<div class="card">
    <h2>{name}</h2>
    <Image src={images[imagePath]()} alt={altText} />
</div>

Используйте компонент, передавая полный путь к изображению.

---
import Card from '../components/Card.astro';
---
<Card
    imagePath="/src/assets/avatar-1.jpg"
    name="Прийя"
    altText="Фото пользователя"
/>