Hero image
The banner above is pulled from the hero field in frontmatter:
hero: "/blog/images/sample-hero.png"Use an absolute path from the site root. Blog images live under src/vuefrontend/public/blog/images/; Vite copies them into dist/ unchanged, so the URL is always /blog/images/.... That path works in frontmatter (read from raw markdown before Vite processes the post body) and matches what browsers request in production.
Inline images
Standard markdown syntax works for inline images:
Which renders as:
Images with HTML for captions
When you need a caption or finer control over sizing, drop into HTML. Since blog posts compile to Vue components, raw HTML is rendered directly:
Where to store images
Keep blog images in src/vuefrontend/public/blog/images/. Organise by post date or topic if the folder grows:
src/vuefrontend/public/blog/images/
├── sample-hero.png
├── 2026-04-rate-limiting/
│ ├── dashboard-screenshot.png
│ └── architecture-diagram.pngReference them with root-absolute URLs (same in frontmatter and body):
Summary
| Method | Syntax | Best for |
|---|---|---|
| Hero banner | hero frontmatter field | Top-of-post featured image |
| Inline markdown |  | Simple figures in the flow of text |
HTML <figure> | <figure><img .../> | Captioned images, custom sizing |
FAQ
Where do blog images live?
Keep them in src/vuefrontend/public/blog/images/. Vite copies that folder into the site root, so the public URL is /blog/images/…
How do I set a hero image?
Set the hero field in frontmatter to a site-root path, for example /blog/images/sample-hero.png. The same path works in the markdown body.
Can I add a caption?
Yes. Use a figure element with an img and a figcaption. Blog posts compile to Vue, so that HTML renders in the page.
Do relative image paths work?
Use root-absolute URLs. A path that depends on the post file location will not match the published URL.