Как вернуть изображение из http источника в Javascript

Question

У меня есть список словарей, содержащих данные, где каждый словарь имеет ключ 'picture' и значение в качестве источника изображения (http). 'picture': 'http: //....' как и другие наборы ключей: значений.

Мне нужно вернуть 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
}

Эта функция возвращает список имен с источником изображений, но не сами изображения, например,

• Капитан Перцы: //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
 }

Answer 2

Вы должны использовать тег img и добавить данные изображения в качестве атрибута src.Вы также можете улучшить читаемость кода, используя буквенную строку.

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
}

Answer 3

Используйте элемент <img>, если хотите показать изображение.Используйте атрибут src, чтобы указать элемент на источник.Вот модифицированный источник.

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 + "\"></img>"
                + "</li>"

        }
    list += "</ul>";

    element.innerHTML = list
}

Кроме того, вы можете использовать строки шаблона ES6 для простой конкатенации строк для построения DOM.

list += `<li> ${data[i].name} <img src="${data[i].picture}"></img></li>`

Answer 4

Использовать тег img

<img src=`${url}`>

Answer 5

Используйте тег <img> для отображения изображений из исходного файла.В теге <img> укажите источник изображения в атрибуте src.

<img src="http://..." >