Image component

The <Image> component is similar to a standard Markdown image component, such as [alt text](/url.png) , but adds the ability for you to set a different image in light mode and dark mode.

Image component

<Image src="/_assets/components/image/light.png" src_dark="/_assets/components/image/dark.png" />

Attributes

The <Image> component can be customized using the following attributes.

Source

The src attribute specifies the default image to display. If referring to an image in your Docapella project, but be an absolute path to your /_assets directory, such as /_assets/cat.jpg .

This is a required attribute.

Image component

// [!code word:src:1]
<Image src="/_assets/cat.jpg">

Dark mode image

You can also specify a dark mode image using the src_dark attribute. This is useful for displaying a different image in dark mode and light mode.

Image component

// [!code word:src_dark:1]
<Image src="/_assets/cat.jpg" src_dark="/_assets/cat-dark.jpg">

Alt text

You can specify an alt text for the image using the alt attribute. It's highly recommended to add alt texts to your images in order to improve the accessibility and SEO of your documentation.

Image component

// [!code word:alt:1]
<Image src="/_assets/cat.jpg" alt="A cute cat">