Change image size in Docusaurus

Question

I'm using Docusaurus to make documentation.

I want to add an image to a markdown file, and also resize it to prevent it to be larger than needed.

Checking This answer, I realized this is possible using static html content in the md file, but since the image is statically in docs/assets, <img> tag can't find it.

![Github](assets/github_logo.jpg)

which can not be resized, and

<img src="assets/github_logo.jpg" width="200" />

which can't find the asset.

I will be happy to get any solutions.

Answer 1

For Docusaurus specifically, because it uses MDX you can import you assets.

import GitHubLogo from './assets/github_logo.jpg';

And then reference it for the image source

<img src={GitHubLogo} width="200"/>

This has been super useful for me when it comes to avoiding caching issues thanks to webpack.

Also, be careful with the width and height, the latest version (2.1.0) has css that overrides the width property.

img {
  max-width: 100%;
}

I've ended up applying inline styles.

<img src={GitHubLogo} style={{width: 200}} />