You're viewing the dependabot/github_actions/pnpm/action-setup-6 deployment.

`Img`

Using images in documentation

Display images using markdown, HTML or <Img> syntax with automatic dimensions and relative path support.

Relative paths

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

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

authoring/img.mdx

---
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:

<Img> written as such works like <img>: relative src resolved, dimensions read:

<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, or to a root-relative one.