如何在React中渲染存储在本地服务器的原始HTML图片

问题根因 #

现代浏览器默认启用跨协议安全限制，禁止在http/https协议加载的网页上下文内访问file://协议的本地资源，这就是公网外链图片可正常加载、但本地file://路径图片无法渲染的核心原因。

可行解决方案 #

• 替换file://协议路径为HTTP服务路径
  你的本地服务器如果已启动HTTP文件服务，直接把图片路径修改为对应服务的HTTP地址即可。比如本地服务器IP为192.168.3.2、服务端口为8000，修改html.test.js代码如下：

  module.exports = `
  <html>
  <img src="http://192.168.3.2:8000/image.jpg" />
  </html>`
  

  如果前端服务和图片存储服务为同域同端口，可直接使用相对路径/image.jpg。
• 把静态资源放入前端项目静态目录
  如果你使用React脚手架创建的项目，把图片放到项目public静态资源目录下，直接使用相对于public目录的路径即可，打包工具会自动处理资源映射。
• 开发环境临时关闭安全限制（仅本地测试可用，禁止生产环境使用）
  如果你仅需本地临时调试，可以给Chrome添加启动参数--allow-file-access-from-files，解除跨协议资源加载限制，该方案仅适用于本地测试，无生产可用性。
• 检查跨域配置
  如果图片服务和前端服务端口/域名不一致，需要在图片存储的本地服务器上配置CORS规则，允许你的前端域名访问图片资源，避免跨域拦截导致加载失败。

内容的提问来源于stack exchange，提问作者KylianMbappe