Importer dynamiquement des images

Les images locales doivent être importées dans les fichiers .astro afin de les afficher. Il y aura des moments où vous voudrez ou devrez importer dynamiquement les chemins de vos images au lieu d’importer explicitement chaque image individuelle.

Dans cette recette, vous apprendrez à importer dynamiquement vos images en utilisant la fonction import.meta.glob de Vite. Vous allez construire un composant de carte qui affiche le nom, l’âge et la photo d’une personne.

1. Créez un nouveau dossier assets sous le répertoire src et ajoutez vos images dans ce nouveau dossier.

   • Répertoiresrc/

     • Répertoireassets/

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

2. Créez un nouveau composant Astro pour votre carte et importez le composant <Image />.

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

3. Spécifiez les props que votre composant recevra afin d’afficher les informations nécessaires sur chaque carte. Vous pouvez optionnellement définir leurs types, si vous utilisez TypeScript dans votre projet.

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

4. Créez une nouvelle variable images et utilisez la fonction import.meta.glob qui retourne un objet contenant tous les chemins d’accès aux images dans le dossier assets. Vous devrez également importer le type ImageMetadata pour vous aider à définir le type 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}')
   ---

5. Utilisez les props pour créer le balisage de votre composant de carte.

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

   

   ">