Images dans le blog : chemins, couvertures et figures

Cet article illustre comment placer des images locales dans apps/frontend/public/posts/2026/ et les référencer avec des chemins absolus (/posts/2026/...).

Couverture et carte

Le champ image du frontmatter pointe vers la même couverture que celle affichée en haut de l’article : /posts/2026/guide-images-cover.svg.

Figure dans le corps

Le schéma ci-dessous résume le flux : fichiers dans public/, URLs depuis la racine du site.

Bonnes pratiques

1. Nommer les fichiers sans espaces (guide-images-cover.svg).
2. Préférer /posts/2026/mon-fichier.png plutôt qu’un chemin relatif au slug.
3. Renseigner le texte alternatif des images pour l’accessibilité.

Exemple de balise générée

Syntaxe Markdown équivalente à la figure ci-dessus :

![Légende](/posts/2026/guide-images-diagram.svg)

Astro sert les chemins locaux depuis public/ ; l’image est responsive dans la prose du blog.

Conclusion

Avec Markdown + frontmatter et des assets sous apps/frontend/public/posts/YYYY/, les articles restent simples à versionner tout en s’affichant correctement sur la plateforme.