After using ajax to load data and attempting to display an image with javascript, I am encountering a problem where the image is not showing up. I could use some assistance in figuring out what mistake I made.
URL="testurl";
function getdata() {
let xhr = new XMLHttpRequest();
let image = document.getElementById("image");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
var data = JSON.parse(xhr.responseText);
var img = data.image;
image.innerHTML += '<img src="' + img + '">';
}
xhr.open('GET', URL);
xhr.send();
}Despite seeing the image loaded message in console.log(data.image); it seems like the image just refuses to appear on the screen.
image.innerHTML += '<img src="' + img + '">';