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.
Usage
You can use the Image
component set the light and dark mode image as follows:
<Image src="/_assets/light.png" src_dark="/_assets/dark.png" />
Try toggling dark and light mode in the header, and watch the image below change.
![](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=AKIA5SVLUIAJSXFDENFN%2F20240722%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20240722T000000Z&X-Amz-Expires=604800&X-Amz-Signature=4901b7ae24846093e013e2f89e412325c6006de81cd33199914fc9e1fe084dcc&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=AKIA5SVLUIAJSXFDENFN%2F20240722%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20240722T000000Z&X-Amz-Expires=604800&X-Amz-Signature=7d95bd8cadaa73e0cbb77c5fcc8fd3e336474b6d82f1bd98fd271b64f84971b2&X-Amz-SignedHeaders=host&x-id=GetObject)
Props
The component accepts the following props as attributes.