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

No I didn't, I ended up just rendering the images below and outside the markdown component, instead of inline — Brad
– Brad, Commented Aug 17, 2018 at 2:00
Ok, thank you for your answer! As you've probably guess, I was experiencing the same problem. The cause of the problem is in fact simple and I found it by asking myself this question: what is the difference between my md file read by the editor and what I see in my browser? In React, your code is compiled: the image is just not found. For example, if you use create-react-app, the basic configuration allow you to import images like this: import myImage from 'path/to/image.png'. In your md file, if you use the image path then the compiler can't find it. Are you using create-react-app? — Sylla
– Sylla, Commented Aug 18, 2018 at 10:29
@Sylla thanks and sorry for the late response. Yes I'm using create-react-app. So I import the image as a component in the main .js, then how do I call the component in the .md file? — Brad
– Brad, Commented Dec 14, 2018 at 3:24
Unfortunately the solution is not that straightforward, if you want to modify the way you use an image, you have to eject. I had found another solution but I can't find the link anymore... To allow server side rendering, I finally chose to use Next.js along with MDX and this is working very well! — Sylla
– Sylla, Commented Dec 27, 2018 at 14:37

Nicholas Credli · Accepted Answer · 2020-05-27 09:40:14Z

19

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

edited May 27, 2020 at 9:40

Nicholas Credli

9069 silver badges14 bronze badges

answered Oct 13, 2019 at 18:25

Hamid Noei

3112 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Belke Over a year ago

REACT_IMAGE_BASE_URL doesn't work for me. Only if REACT_APP_IMAGE_BASE_URL then it works. And how to add domain name dynamically?

FloJDM · Accepted Answer · 2022-10-06 08:02:41Z

3

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

answered Oct 6, 2022 at 8:02

FloJDM

3473 silver badges14 bronze badges

Comments

Dharman · Accepted Answer · 2021-08-10 06:43:44Z

1

On issues page of react-markdown I found an issue, where a guy solved this by adding escapeHtml={false} to <ReactMarkdown /> component. I tried it and it worked.

edited Aug 10, 2021 at 6:43

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

answered Aug 10, 2021 at 6:38

Mrmld Sky

1692 silver badges10 bronze badges

Collectives™ on Stack Overflow

react-markdown images not rendering in browser

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related