Skip to main content

🌅 Images

Showing images using Markdown​

To show this image:

Some alt text

Just use the usual Markdown code:

![Some alt text](/img/docu.svg)

Pros:

  • simple to use
  • standard Markdown

Cons:

  • can't click in the image to get a larger version
  • people can get confused and try to click on it / copy paste text on it

Markdown images you can click to get a bigger version​

Clicking on this image will open it in a new Window / Tab, so it can be expanded for better viewing.

A dinosaur typing in a laptop

[![A dinosaur typing in a laptop](/img/docu.svg)](/img/docu.svg)

Showing images using JSX​

If you want a fine-grained control over how the image is presented (changing the size, for instance) then use this JSX snippet:

import useBaseUrl from '@docusaurus/useBaseUrl';

<img
        alt="Using JSX to change image's size"
        src={useBaseUrl('/img/docu.svg')}
        width="500"
/>
Using JSX to change image's size

Pros:

  • can change the size of the image (you can't do it using Markdown)

Cons:

  • can't click in the image to get a larger version
  • people can get confused and try to click on it / copy paste text on it

We can just import the desired image/resource and create a variable that we'll use to display the image. Works well with images (pngs, gif, jpg) not with svg files.

import SampleImage from '@site/static/img/logo.png';

<img
        alt="Using JSX to change image's size"
        src={SampleImage}
        width="100"
/>
Using JSX to change image's size

Screenshots​

If you need to add screenshots, you can use the Screenshot component which will wrap the image in a browser frame. They also add a hover cursor to tell the user "you can't click in here".

Screenshot of the documentation

Here's the syntax for the Screenshot component

<Screenshot src="img/path_to_image.png" url="<showed in the address bar" alt="Alt text for the image" />