时间戳

首页 > 解决方案 > 将 React 嵌入 HTML 页面 - 图片 URL 不起作用

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

问题描述

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

我该如何解决这个问题？

标签： htmlreactjsamazon-web-servicesamazon-s3webflow

解决方案

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);

推荐阅读