反应降价图像未在浏览器中呈现

Question

我在网络应用中使用react-markdown。当我使用![](image1.jpg)加载与.md文件存储在同一文件夹中的图像时，可以在Visual Studio的预览中正确显示图像，但不能在浏览器中正确显示-而是在两个开发中都出现图像错误和生产版本。我已经尝试过转义HTML，但这也不起作用。我正在将.md页面作为组件加载，所有文本和格式都可以完美运行。

谢谢

Answer 1

我在Strapi和Gatsby上遇到了同样的问题，请观看此视频，这可能有助于修复图像URI以正确加载图像： https://youtu.be/LIrK5KxsUSE?t=351

这是我的固定武器：

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

.env.development文件：

IMAGE_BASE_URL =http://localhost:1337

Answer 2

在 react-markdown 的问题页面上，我找到了 an issue，有人通过将 escapeHtml={false} 添加到 <ReactMarkdown /> 组件解决了这个问题。我试过了，它奏效了。