javascript - 创建 react 应用程序危险设置InnerHTML图像路径

Question

我正在一个小项目中使用create React应用程序，我必须在其中注入(inject)一个html。我使用了angerouslySetInnerHTML并且它有效。问题是，在该 html 中，我有一些 img 标签，在 src 中带有相对外部路径。像这样:

<img src="/var/exmple-fake-image/images//f0026-012.jpg" width="1312" height="1629" style="border: 0px ;" alt="f0026-01" title="f0026-01">

当我在本地运行应用程序时，它会使用 http://localhost:3000/var/exmple-fake-image/images//f0026-012.jpg 完成 src

我如何更改它以使用正确的路径完成它？我仍然想在本地运行它

注入(inject)html中的所有图像都需要使用相同的路径(https://cdn2.audiencemedia.com)来完成，所以我需要一种方法来添加此路径而不是http://localhost:3000/已添加。

假示例的正确路径 https://cdn2.audiencemedia.com/var/exmple-fake-image/images//f0026-012.jpg

我希望我已经很好地解释了自己

解决方案:我刚刚添加了 "proxy": "https://cdn2.audiencemedia.com",在 package.json 中。比我想象的要容易。

Answer 1

由于您的 src 属性没有主机名，只有以 / 开头的路径，因此它是相对于当前域进行解析的。

您可以通过以下两种方法之一解决此问题:

最简单的方法是简单地将完整域添加到 src 属性，因此改为 src="https://cdn2.audiencemedia.com/var/exmple-fake-image/images//f0026-012 .jpg".

一个更复杂的解决方案可以让您避免在代码中硬链接(hard link)到该域，即通过开发服务器将图像请求代理到 cdn2.audiencemedia.com。如何执行此操作取决于您使用什么服务器来提供静态 react 文件。