79138304

Date: 2024-10-29 17:22:15
Score: 0.5
Natty:
Report link

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" />

Reasons:
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @Emiel's
  • Self-answer (0.5):
  • Low reputation (0.5):
Posted by: programming_ritual