使用 Javascript 中的 api 调用获取图像 url 到 HTML 中的图像标签？答案

【问题标题】：Fetch image url to image tag in HTML using api calls in Javascript?使用 Javascript 中的 api 调用获取图像 url 到 HTML 中的图像标签？
【发布时间】：2018-06-19 10:29:04
【问题描述】：

我有 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))

【问题讨论】：

这里有什么问题？
使用 JavaScript 修改上面的 HTML 页面（图片）以显示来自上面给出的 API 的表情符号

标签： javascript ajax html api

【解决方案1】：

<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】：

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))

【讨论】：

谢谢先生..如何修改上述代码以使用api键值搜索功能
我在 html 中有一个搜索栏，可以在 api 中搜索远程表情符号
您可以使用支持搜索的api。你也可以编辑上面的代码，看看key中是否有关键字。 (key.indexOf()!== -1)。请接受答案。

【解决方案3】：

这将对您有所帮助：

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))

【讨论】：

谢谢先生..如何修改我上面的js代码以使用api键值搜索功能..我有一个搜索栏来搜索api中的远程表情符号
为此，您必须向图像添加 id 或替代文本。然后通过该 id 或替代文本找到图像。
您可以通过以下方式获得帮助：stackoverflow.com/questions/2914456/…