危险地创建反应应用SetInnerHTML图像路径

Question

我正在使用 create react app 到一个我必须注入 html 的小项目。我使用了 dangerouslySetInnerHTML 并且它有效。问题是在那个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

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

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

Answer 1

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

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

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

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