Images

Images can be displayed from remote, or local sources using either standard Markdown syntax, or the <Image> component.

Example

To display images using Markdown syntax, use the following syntax: ![alt text](image url):

Image Sources

When providing an image URL which starts with http, the image from that URL will be displayed. However, if you provide a relative path, such as /assets/my-image.png, docs.page will source the image from your GitHub repository (relative from the /docs directory).

If you are previewing documentation on a preview (e.g. branch, PR, commit) the image will be sourced from that reference.

For example, if your repository contains a file at /docs/assets/my-image.png, pass /assets/my-image.png as the source of the image.

Image Attributes

The <Image> component can be used to enhance images within your documentation. The component accepts all of the standard HTMLImageElement attributes:

<Image src="/assets/my-image.png" alt="Pretty picture" width="100" height="100" />

Zooming

The <Image> component also supports zooming of images. To enable zooming, pass the zoom prop to the image:

<Image zoom src="https://my-cdn.com/bald-eagle.jpg" />

Captions

To add a caption below the image, use the caption prop:

<Image caption="An abstract image" src="https://my-cdn.com/abstract.jpg" />

Theme

By default, images will be displayed on both the light and dark theme. To display an image only a specific theme, use the theme with either light or dark:

<Image caption="A light only image" theme="light" src="https://my-cdn.com/abstract-light.jpg" />

<Image caption="A dark only image" theme="dark" src="https://my-cdn.com/abstract-dark.jpg" />