动态响应Markdown所需的MD文件，图像相对路径不起作用 [英] React Markdown dynamically required MD file, image relative path not working

问题描述

我无法在降价文件中获取我的图像进行渲染.我需要在react组件中使用markdown文件，但md文件中的图像无法渲染.联机图像的绝对路径有效，但相对路径无效.

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)

picsums有效，但./或../../../static/markdowns/file不起作用.

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

谢谢

推荐答案

如果您使用的是诸如Create React App之类的图像，并且该图像位于您的 public/文件夹中，那么您应该可以< img src ="/personwithchart.png" alt =文本"> .URL的根目录上应该可以访问 public/目录，因此您不需要 ./ UNIX约定.

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.

这篇关于动态响应Markdown所需的MD文件，图像相对路径不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！