Img

Using images in documentation

Summary

Display images using markdown or HTML syntax with automatic dimensions and relative path support.

Relative images are supported. Eg, inside your MDX folder:

|-- authoring
|   |-- img.mdx  <= relative to this article
|   `-- gutenberg.jpg

---
title: Authoring
---

![](gutenberg.jpg)

result:

Tip

You are encouraged to use relative images, since dimensions are automatically added as img[width][height] attributes.

For others, think about adding them to prevent layout shift.

It is also possible to specify only one dimension (other is inferred from intrinsic ratio), eg:

<img src="gutenberg.jpg" height="200" />

result:

Although it is probably better to use CSS for this:

<img src="gutenberg.jpg" style={{width: 'auto', height: '10rem'}} />

result:

Note

See MDX_BASEURL to understand how it is converted to a full URL.