mdBook : Markdown : Images

Pour insérer une image dans une page mdBook, il faut écrire un lien interne en ajoutant un point d’exclamation ! accolé au crochet ouvrant.

Par exemple :

![Texte](https://apprendre-et-maitriser-mdbook.marcjestin.fr/images/bloc-notes-mdbook-markdown-code-ceci-est-une-citation.png)

affiche :

Stockage des images

Dans l’exemple précédent, j’ai choisi d’utiliser une image comme si elle était en dehors du projet.

J’ai donc utilisé un lien externe avec un chemin absolu sous un format https://.

Pour intégrer une image dans notre projet mdBook, nous suivons les étapes suivantes :

1. Stocker l’image quelque part dans le dossier source du projet mdBook (nom-du-projet/src par défaut)
   • soit directement dans le dossier source
   • soit dans un sous-dossier, par exemple nom-du-projet/src/images.
     • si nécessaire, nous créons ce dossier.
2. Écrire le code Markdown avec une syntaxe de lien interne avec un chemin relatif.

Lorsque le projet est compilé, soit avec mbook build, soit au travers de mdbook serve, les pages mdBook sont générées et les fichiers des images sont copiées dans le dossier destination (nom-du-projet/book par défaut).
Si nous avons créé un dossier nom-du-projet/src/images pour y placer nos images, nous avons un dossier nom-du-projet/book/images qui contient une copie de ces images et qui est copié sur le serveur Web avec le reste du site Web mdBook lorsque nous copions le contenu du dossier destination comme il se doit.

Exemple de lien avec la même image, cette fois-ci stockée dans mon dossier /src/images.

Voici le code Markdown :

![Texte](images/bloc-notes-mdbook-markdown-code-ceci-est-une-citation.png)

Et voici le rendu :

Bonne pratique

Je recommande d’utiliser la méthode compilateur avec des liens internes sous forme de chemins relatifs en plaçant nos images dans le dossier source du projet mdBook pour améliorer la portabilité.

Il peut arriver que nous adoptions une stratégie différente pour de nombreuses raisons.