javascript - 如何在 Javascript 中从 http 源返回图像

Question

我有一个包含数据的字典列表，其中每个字典都有一个键“图片”和一个值作为图像源 (http)。 'picture': 'http://....' 以及其他 key:value 集合。

我需要返回一个 html 页面，其中包含与词典关联的名称和图像列表。

我已经设法返回了一个名称列表，但是当我尝试返回图像时，它以字符串形式返回了图像源。

function add_people(data) {
    var element = document.getElementById('people');

    var list = "<ul>";
        for (var i=0; i<data.length; i++) {
            list += "<li>"
                + data[i].name
                + data[i].picture
                + "</li>"
        }
    list += "</ul>";

    element.innerHTML = list
}

此函数返回一个包含图像来源的名称列表，但不返回图像本身，例如

• Pertsy 船长://robohash.org/8c4b1b5a-bb8f-489b-8102-a1e9634627e0

感谢帮助，谢谢。

Answer 1

您需要在列表元素中添加图像标签以获取图像

 function add_people(data) {
    var element = document.getElementById('people');

var list = "<ul>";
    for (var i=0; i<data.length; i++) {
        list += "<li>"
            + data[i].name
            + "<img src='"+data[i].picture+"' />"
            + "</li>"
    }
list += "</ul>";

element.innerHTML = list
 }