Ce bloc-notes mdBook vous est proposé avec passion par Marc JESTIN — Happy Numeric.
À votre service pour vous accompagner dans vos projets numériques.
Contact : https://happynumeric.fr/me-contacter.


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://happynumeric.fr/images/Bloc-notes-mdBook/bloc-notes-mdbook-markdown-code-ceci-est-une-citation.png)

affiche :

Texte

Stockage des images

Dans l'exemple précédent, j'ai choisi d'utiliser une image en dehors du projet :

  • le projet est dans « https://happynumeric.fr/Bloc-notes-mdBook » ;
  • l'image est dans « https://happynumeric.fr/images/(...) ».

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 :

Texte

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.


Ce bloc-notes mdBook vous est proposé par Marc JESTIN — Happy Numeric.
Formation, rédaction de documentations techniques ou organisationnelles, mise en place de solutions documentaires internes et externes, assistance à maîtrise d'ouvrage, etc.
Contact : https://happynumeric.fr/me-contacter

N'hésitez pas à me faire votre feedback, me signaler des erreurs ou des compléments que vous souhaiteriez que j'ajoute à ce bloc-notes mdBook.
Cliquez ici pour me contacter


À propos de cette page

Création : 17 mars 2023

Dernière version : 24 mars 2023 00:18