1

Im trying to render a Markdown file in my react app.

Im using the react-markdown library and converting the MD to text using the following:

    useEffect(() => {
        fetch(markdownfile).then((response) => response.text()).then((text) => {
            setmarkdown(text)
        })
    })

The above is saving my variable into a state called markdown and Im then trying to render it using:

<ReactMarkdown content= {markdown} />

Its rendering fine but all my images are showing up like this:

![Basic- Generate.png](./img/Basics - Generate.png)

could someone please help me with how to render images and where I would need to store it locally

user15382008
  • 11
  • 1
  • That is markdown for images, when you fetch, it probably can't find the image located in ./img/basics – axtck Mar 12 '21 at 10:48
  • So if im not mistaken even though the format is like : ![Basic- Generate.png](./img/Basics - Generate.png) My react app will still be able to render it? – user15382008 Mar 12 '21 at 10:52
  • I have never used the library that you are using so I am not really sure, but it has to find that image, otherwise it will probably show like ![]() for an image, you can read about md images here https://medium.com/markdown-monster-blog/getting-images-into-markdown-documents-and-weblog-posts-with-markdown-monster-9ec6f353d8ec – axtck Mar 12 '21 at 12:05

1 Answers1

0

Basically if you using the markdown package the image file should have your domain url in-front of the image file location. it should like below example.

https://yourdomain.com/img/Basics%20-%20Generate.png

In another way better you provide image links.

Balaji Govindaraj
  • 13
  • 2