Image Handling in Docusaurus

For the Playground documentation, I needed to have more control over the sizes of images. It was a bit tricky because it required a React approach rather than a Markdown approch.

Markdown renders the image in the orignal size.

![Site Explorer Snapshot](./_assets/installed-adventurer-theme.png)

The image is located in the _assets folder relative to the *.md file.

Display an Image with a reduced width

The code to display the same image with width=400.

import Image from '@theme/IdealImage';
import Adventurer from '@site/static/img/adventurer-theme.png';

<div style={{maxWidth:400}}><Image img={Adventurer} /></div>

The image is displayed via a React component (<Image/>)

In short:

• Move the image in /packages/docs/site/static/img folder
• Imports a special image component from Docusaurus
• Imports a specific image file
• Displays that image with a maximum width of 400 pixels using the special Docusaurus image component

In detail:

The first line imports a special Image component from Docusaurus’s theme system. The ‘@theme’ path is specific to Docusaurus and indicates it’s using a component provided by the framework. ‘IdealImage’ is a component that handles images with features like lazy loading and responsive sizing.

The second line imports the actual image file. The ‘@site’ path is another Docusaurus-specific path that points to your website’s root directory. The rest of the path shows where the image file is located – in the static/img folder, and it’s named “installed-adventurer-theme.png”.

The third line creates a div (container) with a maximum width of 400 pixels, and inside it, it renders the Image component.

The img={Adventurer} part passes the imported image as a prop to the Image component.

The double curly braces {{...}} are used because in JSX (React’s syntax), a single set of curly braces {...} is used to embed JavaScript expressions, and inside that, we’re defining a JavaScript object which itself uses curly braces.

The Docusaurus’s IdealImage component displays optimized image with lazy loading (images only load when scrolled into view) and responsive sizing.

Huge “Thank You” to the JavaScript teacher and code-archiologist, JuanMa Garrido and my special friend Claude.ai.