我有json对象,我想使用api调用从远程url获取图像到这个img标签。 api的链接是https://api.github.com/emojis
<div class="emoji">
<ul id="emojiz"></ul>
<span style="display:inline;"><img src=""></span>
<span style="display:inline; "><img src=""></span>
<span style="display:inline;"><img src=""></span>
<span style="display:inline; "><img src=""></span>
</div>
JS
fetch('https://api.github.com/emojis')
.then(response => response.json())
.then(data => {
console.log(data) // Prints result from `response.json()` in getRequest
})
.catch(error => console.error(error))
答案 0 :(得分:2)
fetch('https://api.github.com/emojis')
.then(response => response.json())
.then(data => {
console.log(data) // Prints result from `response.json()` in getRequest
Object.keys(data).forEach((key) => {
var ele = document.createElement("span");
var img = document.createElement("img");
img.setAttribute("src", data[key]);
ele.appendChild(img);
//append ele to parent div
});
})
.catch(error => console.error(error))
答案 1 :(得分:2)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var images={};
fetch('https://api.github.com/emojis')
.then(response => response.json())
.then(data => {
images=data;
Object.keys(data).forEach((key) => {
var ele = document.createElement("span");
var img = document.createElement("img");
img.setAttribute("src", data[key]);
ele.appendChild(img);
var elem=document.getElementById('emoji').appendChild(ele);
});
})
.catch(err => console.error(err));
$("#searchBox").change(function(event){
var searchTxt=$("#searchBox").val();
$('#emoji').empty();
setTimeout(function(){
Object.keys(images).forEach((key) => {
if(images[key].indexOf(searchTxt)!=-1){
var ele = document.createElement("span");
var img = document.createElement("img");
img.setAttribute("src", images[key]);
ele.appendChild(img);
var elem=document.getElementById('emoji').appendChild(ele);
}
});
},0);
});
});
</script>
</head>
<body>
<input type="text" id="searchBox" placeholder="search">
<div id="emoji">
<ul id="emojiz"></ul>
<span style="display:inline;"><img src=""></span>
<span style="display:inline; "><img src=""></span>
<span style="display:inline;"><img src=""></span>
<span style="display:inline; "><img src=""></span>
</div>
</body>
</html>
请尝试这个。
答案 2 :(得分:1)
这将对您有所帮助:
HTML
<div class="emoji" id="emoji">
<ul id="emojiz"></ul>
<span style="display:inline;"><img src=""></span>
<span style="display:inline; "><img src=""></span>
<span style="display:inline;"><img src=""></span>
<span style="display:inline; "><img src=""></span>
</div>
JS:
fetch('https://api.github.com/emojis')
.then(response => response.json())
.then(data => {
var div = document.createElement('div');
div.innerHTML = '';
for (var prop in data) {
console.log(data[prop]);
div.innerHTML +=
'<span style="display:inline;"><img src="'+data[prop]+'"></span>';
}
document.getElementById('emoji').appendChild(div);
})
.catch(error => console.error(error))