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

回答1:

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.

来源：https://stackoverflow.com/questions/60606026/react-markdown-dynamically-required-md-file-image-relative-path-not-working