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

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

Orange Car

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 Component#

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" />


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" />

If your configuration file has zoomImages enabled, all images will zoom by default.


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

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