Error while executing javascript promises - promise

Question

I am getting console error as:Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
I wish to know where I am going wrong in my concepts..Thanks
const myImage = document.querySelector("img");
const myRequest = new Request('elephant.jpg');
// console.log(myRequest)
fetch(myRequest)
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`)
}
else {
console.log(`no HTTP error, elephant.jpg file is present,Status: ${response.status}`)
myBlob=response.blob();
const objectURL = URL.createObjectURL(myBlob);
myImage.src = URL.createObjectURL(response)
}
})
<h1>Fetch Request example</h1>
<img src="" />

Answer 1

Coding alone will not help you all the time, but also knowing when & how to DEBUG will!
You're very close in getting the desired outcome. Lets go step by step to see what you're missing..
If you log response.blob(), it will return Promise {<pending>}, means you aren't awaiting for this to complete, the executions proceeds to next line window.URL.createObjectURL(myBlob); where myBlob is still empty.
And this is when async await comes to the rescue.
fetch(myRequest).then(async (response) => {
.. your code
myBlob = await response.blob()
}
And secondly,
the `src` property would need the BLOB to display the image so,
myImage.src = window.URL.createObjectURL(myBlob);
Good luck with promises!
My code:
const myImage = document.querySelector("img");
const myRequest = new Request("elephant.jpeg");
fetch(myRequest).then(async (response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
} else {
console.log(
`no HTTP error, elephant.jpg file is present,Status: ${response.status}`
);
myBlob = await response.blob() // ensure this is defined in your file
const objectURL = window.URL.createObjectURL(myBlob);
myImage.src = window.URL.createObjectURL(myBlob);
}
});

Answer 2

Double check to make sure you have the right image url.
As it shows in your code, you need the image in the same folder as your code.