如何在React中使用markdown渲染图像？

Question

我的 Markdown 文件中有

![Alt text](/RSA1.jpg )

。当我读取 markdown 文件并渲染时，它显示的是替代文本而不是图像，当我检查时，有如下一行：

<img alt="Alt text" src="/RSA1.jpg">

如何渲染图像？？？ 我使用

markdown to jsx

作为降价解析器。

Answer 1

组件时代的Markdown MDX 是一种可创作格式，可让您在 Markdown 文档中无缝编写 JSX。您可以导入交互式图表或警报等组件，并将它们嵌入到您的内容中。这使得使用组件编写长篇内容变得非常有趣

https://mdxjs.com/getting-started/

Answer 2

确保 RSA1.jpg 位于您的公共文件夹中，并且它应该正确渲染图像。 Markdown 解析器无法找到图像，除非它们位于公共文件夹中。

Answer 3

观看此视频可能有助于修复图像 URI 以正确加载图像：https://youtu.be/LIrK5KxsUSE?t=351

这就是解决方案：

 <Reactmarkdown source={data.strapiArticle.content} transformImageUri={uri =>
uri.startsWith("http") ? uri : `${process.env.REACT_IMAGE_BASE_URL}${uri}` />

.env.开发文件：

REACT_IMAGE_BASE_URL =http://localhost:1337