17

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.

Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
Mahdi-Malv
  • 16,677
  • 10
  • 70
  • 117

2 Answers2

11

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}} />
brismuth
  • 36,149
  • 3
  • 34
  • 37
Jackson Cupp
  • 146
  • 1
  • 5
  • This is not working – intergallactic Apr 09 '23 at 20:28
  • Worked great for me! – brismuth Jul 23 '23 at 22:03
  • I initially overrode the `max-width` attribute on my images, but that made them look bad on mobile devices. I found that applying `max-height` style to my images instead gave me the best result. That way, I can have the image be a good size on both desktop and mobile. – brismuth Aug 01 '23 at 05:04
  • Usually the image is imported from /img/.../xxx.png which actually locates in /static/img/.../xxx.png in source repository. – Tom Yu Aug 19 '23 at 16:43
4

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.

Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141