时间戳

首页 > 解决方案 > 如何在 Javascript 中从 http 源返回图像

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

问题描述

我有一个包含数据的字典列表，其中每个字典都有一个键“图片”和一个作为图像源 (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
}

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

感谢您的帮助，谢谢。

标签： javascripthtmlimage

解决方案

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

 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
 }

推荐阅读