CODEWITHSUNDEEP
javascriptreactjsimageimportmarkdown
user12843000
user12843000

Reputation: 45

React Markdown dynamically required MD file, image relative path not working

i cannot get my image in the markdown file to render. I am requiring the markdown file in a react component, but the image in the md file is not rendering. absolute paths to online images are working, but relative paths are not. 

useEffect(() => {
    fetch(require(`../../../static/markdowns/${category.file}`)).then(r => r.text()).then(text => { setMarkDown(text) })
}, [])

<ReactMarkdown escapeHtml={false} source={markDown}/>

<img src='https://picsum.photos/200/300'></img>
<img src="./personwithchart.png" alt="Text">
![](https://picsum.photos/200/300)
![](./personwithchart.png)

the picsums work but ./ or ../../../static/markdowns/file do not.

thanks

Upvotes: 1

Views: 3606

Answers (1)

YSbakker
YSbakker

Reputation: 707

If you're using something like Create React App and the image is in your public/ folder, you should be able to do <img src="/personwithchart.png" alt="Text">. The public/ directory should be accessible on your URL's root, therefore you don't need the ./ UNIX convention.

Upvotes: 6

Related Questions