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(() =>{
        .then(response => response.blob())
        .then(image => {
            // Create a local URL of that image
            const localUrl = URL.createObjectURL(image);
}, []);

      <img src={imageData}/>