Как вернуть изображение из источника http в Javascript
У меня есть список словарей, содержащих данные, где каждый словарь имеет ключ «изображение» и значение в качестве источника изображения (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
Помощь приветствуется, спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Используйте тег <img> для отображения изображений из исходного файла.
В теге <img> укажите источник изображения в атрибуте src.
<img src = "http://..." >
вам нужно будет добавить тег изображения внутри элемента списка, чтобы получить изображения
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
}
Спасибо большое, теперь я это полностью понимаю.
Использовать img-тег
<img src=`${url}`>
Используйте элемент <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>`
Вы должны использовать тег 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
}
Вот для чего нужны теги
<img>