Images

Images in Dory support click-to-fullscreen functionality. Clicking any image opens it in a fullscreen modal overlay with a dark background.

Basic Usage#

Use standard Markdown image syntax:

![alt](src)

Dory logo

HTML img Tag#

You can also use the HTML <img> tag for more control:

<img>

Fullscreen Behavior#

When a user clicks an image:

A fullscreen overlay appears with a black semi-transparent background
The image is displayed centered at full size
Clicking anywhere on the overlay closes it

This is useful for screenshots, diagrams, and any image where detail matters.

Images in Columns#

Images can be combined with <Row> and <Col> for side-by-side layouts:

MDX

<Row>
  <Col>
    **Light Mode**

    ![Light mode](../assets/light-mode.png)
  </Col>
  <Col>
    **Dark Mode**

    ![Dark mode](../assets/dark-mode.png)
  </Col>
</Row>

Best Practices#

Note

Store images in the assets/ directory inside your docs folder. Reference them with paths relative to the MDX file, as your editor previews them (e.g. ../assets/image.png from a page in components/). Dory rewrites relative paths to site-root paths at build time, so they work on every page and host. Root paths such as /assets/image.png also work.

Tip

Use SVG images where possible — they scale perfectly at any size and the fullscreen mode will display them at full resolution without any blurriness.

Props#

Attribute	Type	Description
`src`	`string`	Image URL or path.
`alt`	`string`	Alt text for accessibility.
`className`	`string`	CSS classes for sizing and styling.

Was this page helpful?