Images

Using images in documentation

`Img`

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

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

---
title: Images
---

![](gutenberg.jpg)

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 instrisic ratio), eg:

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

Although it is probably better to use CSS for this:

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

Note

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