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.
![](https://doctave-assets-prod.s3.eu-central-1.amazonaws.com/assets/1/1/r-xEBL9gbFGxFRKQObS6EkVUwXrVsUAjJYI-3nfe9b0/light.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA5SVLUIAJXFAOPOU6%2F20240902%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20240902T000000Z&X-Amz-Expires=604800&X-Amz-Signature=3419199ee19d96f3104b2ce2421644c3c1bc8f355138d1de195e1d644cc09d51&X-Amz-SignedHeaders=host&x-id=GetObject)
![](https://doctave-assets-prod.s3.eu-central-1.amazonaws.com/assets/1/1/w8vHb2_Vi2mIyBHEpuf4QX9ieoWkZA5vcYo62wOR7fM/dark.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA5SVLUIAJXFAOPOU6%2F20240902%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20240902T000000Z&X-Amz-Expires=604800&X-Amz-Signature=9afe2aab8abeca075fde3d5bdd97d171ef3e2d2a28fe992f8a14f47dfb57c910&X-Amz-SignedHeaders=host&x-id=GetObject)
<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 Doctave project, but be an absolute path to your /_assets
directory, such as /_assets/cat.jpg
.
This is a required attribute.
<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 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 src="/_assets/cat.jpg" alt="A cute cat">