Images

How to add images to your documentation pages.

Where to put images

Place image files in the public/ directory at the project root. They are then accessible by their path relative to public/.

nextra/
├── public/
│   ├── screenshot.png
│   └── diagrams/
│       └── architecture.png
├── content/
│   └── ...

Usage

Markdown syntax

![Alt text](/screenshot.png)

HTML (for sizing control)

Since MDX supports JSX, you can use an <img> tag for more control:

<img src="/screenshot.png" alt="Screenshot" width="600" />

With a caption

<figure>
  <img src="/screenshot.png" alt="Screenshot" />
  <figcaption>Figure 1: Dashboard overview</figcaption>
</figure>

Tips

• Use descriptive filenames: retention-policies.jpeg not image1.jpg
• Always include alt text for accessibility
• Keep images in a flat structure or organise into subdirectories under public/
• Since this site uses output: 'export' with images: { unoptimized: true }, the Next.js <Image> component is not available — use standard <img> tags or markdown syntax instead