将 React 嵌入 HTML 页面 - 图片 URL 不起作用答案

【问题标题】：Embedding React into HTML-Page - Image URL's not working将 React 嵌入 HTML 页面 - 图片 URL 不起作用
【发布时间】：2020-06-06 21:38:54
【问题描述】：

创建了一个反应组件，构建了应用程序并将构建的内容上传到公共 AWS S3 存储桶。从那里，我将脚本包含到一个普通的 HTML 页面中（在另一个域上）。一切正常，但是，react 应用程序找不到图像。

我该如何解决这个问题？

【问题讨论】：

我猜您的图像位于 S3 存储桶的本地目录中。当您包含 React 脚本文件时，React 将查找 新 HTML 文件的本地目录，而不是您上传原始应用程序的存储桶。
非常好。怎么解决呢？

标签： html reactjs amazon-web-services amazon-s3 webflow

【解决方案1】：

React 脚本通常在本地目录中搜索图像。要在其他域中加载图像，您必须：

将静态网站托管属性添加到您的 s3 存储桶。
更新您的 React 脚本并使用 s3 网站 url 加载图像。

公共 URL 必须类似于：

     import React from "react";
     import ReactDOM from "react-dom";

     function App() {
       return (
         <img 
          src="http://{s3BucketWebStaticHostingURL}/path/to/image.jpg"/>
       );
     }

     const rootElement = document.getElementById("root");
     ReactDOM.render(<App />, rootElement);

【讨论】：