Images in the blog: paths, covers, and figures

This post shows how to store local images under frontend/public/posts/2026/ and reference them with absolute paths (/posts/2026/...).

Cover and card image

The frontmatter image field uses the same asset as the hero: /posts/2026/guide-images-cover.svg.

Inline figure

The diagram below summarizes the flow: files live in public/, URLs are rooted at the site origin.

Best practices

1. Name files without spaces (guide-images-cover.svg).
2. Prefer /posts/2026/my-file.png instead of paths relative to the post slug.
3. Provide meaningful alt text for accessibility.

Example Markdown

Equivalent syntax for the figure above:

![Caption](/posts/2026/guide-images-diagram.svg)

Astro serves local paths from public/; images are responsive inside the blog prose.

Conclusion

Markdown + frontmatter plus assets in apps/frontend/public/posts/YYYY/ keeps posts easy to review in Git while displaying well on the platform.