7-3 Intégrer des images (optionnel)

Si vous voulez intégrer une ou des images dans votre projet, le tout est relativement simple.

Les images doivent être dans le dossier /public. Lors de la compilation du projet, votre application sera en quelque sorte fusionnée avec le contenu du dossier public.

1. Créez un dossier images sous le dossier public

2. Déposez-y une image quelconque, par exemple logo.png

3. Pour faire référence à l'image, simplement utiliser une balise img avec un lien absolu à partir de la racine (/)

   @Component({
     selector: 'app-root',
     imports: [RouterOutlet, ProjetsListe],
     template: `
       <img src="/images/logo.png" alt="logo" />
       <h1>{{title}}!</h1>
       <app-projets-liste></app-projets-liste>
   
       <router-outlet />
     `,
     styles: [],
   })

   astuce

   WebStorm peut vous aider avec l'autocomplétion dès que vous commencez à écrire src="".

Je n'inclurai pas l'image dans le reste des notes de cours dans le but de simplifier, mais vous savez maintenant comment inclure des images!