javascript - 如何使用 Javascript 加载从 API 获取的图片

Question

var loadingImage = image.src(data.points_of_interest[i].main_image);
var bodystuff = document.createElement('img');
bodystuff.innerHTML = loadingImage,
bodystuff.innerHTML = loadingImage,
document.getElementById('outputs').appendChild(bodystuff);

上面是我的 Javascript，这是我的 HTML；

<section id="outputs">    
</section>

API 响应中的图像位置位于此处；data.points_of_interest[i].main_image

(请注意它的 URL 格式 =“https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Westminster_Abbey_West_Door.jpg/337px-Westminster_Abbey_West_Door.jpg”)

(它也在循环中，因此使用 [i])；

请问有什么指示吗？

我上面的代码只在控制台打印出URL。

谢谢

Answer 1

试试这个:

var src = data.points_of_interest[i].main_image; // URL of the image
var bodystuff = document.createElement('img');
bodystuff.src=src;
document.getElementById('outputs').appendChild(bodystuff);