如何从Java脚本中的HTTP源返回图像 [英] How to return an image from http source in Javascript

问题描述

我有一个包含数据的词典列表，其中每个词典都有一个键"picture"和一个值作为图像源(http). 图片":"http://...."以及其他键:值集.

I have a list of dictionaries containing data, where each dictionary has a key 'picture' and a value as an image source (http). 'picture': 'http://....'as well as other key:value sets.

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

I need to return a html page with a list of names and images associated with the dictionaries.

我设法返回了一个名称列表，但是当我尝试返回图像时，它将图像源作为字符串返回.

I have managed to return a list of names but when I try to return the images it returns the image source as a string.

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
}

此函数返回带有图像来源的名称列表，而不是图像本身，例如

This function returns a list of names with the source for the images but not the images themselves, e.g.

• Pertsy上尉://robohash.org/8c4b1b5a-bb8f-489b-8102-a1e9634627e0

非常感谢您的帮助.

推荐答案

您将需要在列表元素内添加图片标签以获取图片

you will need to add image tag inside list element to get the images

 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
 }

这篇关于如何从Java脚本中的HTTP源返回图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！