react-markdown images not rendering in browser

Question

I'm using react-markdown in a web app. When I load an image stored in the same folder as the .md file using ![](image1.jpg) I get the image rendered correctly in the preview in Visual Studio, but not in the browser - instead I get an image error in both the development and production version. I've tried escaping HTML and this doesn't work either. I'm loading a .md page as a component in and all text and formatting works perfectly.

Thanks

Answer 1

I kind of had the same issue with Strapi and Gatsby, watch this video it might help to fix the image URI to load the image correctly: https://youtu.be/LIrK5KxsUSE?t=351

This is what fixed mine:

 <Reactmarkdown
  source={data.strapiArticle.content}
  transformImageUri={uri =>
    uri.startsWith("http") ? uri : `${process.env.REACT_IMAGE_BASE_URL}${uri}`
  }
/>

.env.development file:

REACT_IMAGE_BASE_URL =http://localhost:1337

Answer 2

Install rehype-raw to your project

npm install rehype-raw

Import rehypeRaw

import rehypeRaw from 'rehype-raw'

Add rehypePlugins props on your component

<ReactMarkdown remarkPlugins={[[remarkGfm,]]} children={readmeContent} rehypePlugins={[rehypeRaw]} />