FETCH an IMAGE with ASYNC and AWAIT in Javascript

I want to fetch an IMAGE from the application and display. Here is a simple code

<img src="" id="rainbow" width="480" /> <script> console.log('about to fetch an image'); catchRainbow() .then(response => { console.log('DONE!!! iMAGE IS RENDERED ON THE PAGE'); }) .catch(error =>{ console.log('error while fetching an error'); console.error(error); }); // here goes catchRainbow() function with async and await async function catchRainbow(){ const response = await fetch('rainbow.jpg'); const img123 = await response.blob(); // image datatype is BLOB document.getElementById('rainbow').src = URL.createObjectURL(img123); } </script>

Courtesy --- Full Youtube Video

More Excercises to play with TEXT & DATA are here