我得到了 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>
Javascript 代码如下:
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))
最佳答案
<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>请试试这个。
关于javascript - 使用 Javascript 中的 api 调用将图像 url 获取到 HTML 中的图像标记？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50926188/