How to fetch image data in React.JS?

We can fetch image data in ReactJS using JavaScript’s Fetch Web API. The fetch method returns a promise and when the promise is resolved we get the response as binary object.

The response.blob() also returns a promise. When that promise is resolved, we create a local URL obejct to show the image. After creating the local image URL we keep it inside the component state. Finally, the render method renders it.

const [imageData, setImageData] = useState('');
useEffect(() =>{
    fetch('s3domain/relative-path/filename.jpg')
        .then(response => response.blob())
        .then(image => {
            // Create a local URL of that image
            const localUrl = URL.createObjectURL(image);
            setImageData(localUrl);
        });
}, []);

return(
   <Fragment>
      <img src={imageData}/>
   </Fragment>
)