reactjs – Embedding React into HTML-Page – Image URL's not working-ThrowExceptions

Exception or error:

Created a react component, built the app and uploaded the built to a public AWS S3 bucket. From there, I included the script into a normal HTML page (on another domain). Everything works just fine, however, the react app can’t find the images.

How could I resolve this problem?

How to solve:

React scripts normally search for images in a local directory.
to load images in other domain you had to:

  • add Static website hosting property to your s3 bucket.
  • update your React script and load image with the s3 website url.

the public URL must be something like:

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

Leave a Reply

Your email address will not be published. Required fields are marked *