CODEWITHSUNDEEP
markdowndocusaurus
Mahdi-Malv
Mahdi-Malv

Reputation: 19240

Change image size in Docusaurus

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.

Upvotes: 18

Views: 15461

Answers (2)

Jackson Cupp
Jackson Cupp

Reputation: 206

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}} />

Upvotes: 16

Yangshun Tay
Yangshun Tay

Reputation: 53169

This is not Docusaurus-specific. Markdown syntax doesn't allow you to resize images, you'd have to write raw HTML, which is fine too.

Your path has to be an absolute one and include a leading / in it. If your baseUrl is not / you'd have to include it in the path too.

Upvotes: 4

Related Questions