Home > database >  React-markdown render local images in html img tag
React-markdown render local images in html img tag

Time:11-12

I'm using react-markdown with rehypeRaw plugin in Gatsby. And in my markdown file, im trying to render a picture which I have locally When I fetch images from the web its working so I'm assuming my src tag is not right?

index.mdx,

<figure >
 <img src="346fd5bb-f993-4497-9036-da99fe9e1d76.png"  alt="Running appwiz.cpl">
  <figcaption >Running appwiz.cpl.</figcaption>
</figure>

enter image description here And this is my folder structure

CodePudding user response:

Download the image and move it into your src directory. Import the image into your file, e.g. import MyImage from './thumbnail. webp' . Set the src prop of the image element to the imported image, e.g.

CodePudding user response:

I moved all my images to static and I pass /static/asd.png it works.

  • Related