INTERACTIVE SOLUTION BASED ON @Emiel's Reply
const getFormData = async(url) => {
const googleImageResponse = await fetch(url);
const blob = await googleImageResponse.blob();
//FIX HERE
const googleImageFile = new File([blob], 'profileAvatar.png', {
type: blob.type || 'image/png'
});
//END OF FIX
const imageURL = URL.createObjectURL(googleImageFile);
document.getElementById("myImg").src = imageURL;
document.getElementById("imgName").textContent = googleImageFile.name;
};
//BUTTON EVENT
document.getElementById("loadImageButton").addEventListener("click", async() => {
const url = document.getElementById("imageUrlInput").value;
await getFormData(url);
});
#myImg {
width: 25px;
height: 25px;
}
<input type="text" id="imageUrlInput" value="https://lh3.googleusercontent.com/a/ACg8ocKjThtaGf5USLuL2LBMBuYxfDG0gDdM-RLA_I__UvNI3p_2Hlk=s96-c" placeholder="Enter image URL" />
<button id="loadImageButton">Load Image</button>
<p id="imgName"></p>
<img id="myImg" />