使用 Javascript 中的 api 調用將圖像 url 提取到 HTML 中的圖像標簽？

Question

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

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

請試試這個。

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

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

使用 Javascript 中的 api 調用將圖像 url 提取到 HTML 中的圖像標簽？

問題描述

3 個解決方案

解決方案1
3 已采納 2018-09-07 11:53:28

解決方案2
2 2018-06-19 10:38:34

解決方案3
1 2018-06-19 10:47:52

使用 Javascript 中的 api 調用將圖像 url 提取到 HTML 中的圖像標簽？

問題描述

3 個解決方案

解決方案1 3 已采納 2018-09-07 11:53:28

解決方案2 2 2018-06-19 10:38:34

解決方案3 1 2018-06-19 10:47:52

解決方案1
3 已采納 2018-09-07 11:53:28

解決方案2
2 2018-06-19 10:38:34

解決方案3
1 2018-06-19 10:47:52