来自 JSON 的图像链接并将其应用于 HTML答案

【问题标题】：Image link from JSON and apply it to HTML来自 JSON 的图像链接并将其应用于 HTML
【发布时间】：2021-03-10 09:38:52
【问题描述】：

我创建了一个天气应用程序，我从 API 收集数据并将其作为 JSON 文件接收，它运行良好，我只有一个问题，我想从 JSON 中的链接获取图标并将其应用到我的 HTML，所以我可以自己查看。

非常基本的 HTML


<html lang="en">
<head>
 
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>weather api</title>
</head>
<body>
  <div id="data-result"></div>
  <div id="data-result-temp"></div>
  <img id="data-result-icon" src="" alt=""> // I changed this a lot but did not really work.
  
</body>
<script src="app.js"></script>
</html>

这里还有我的 JS 代码


var url = "https://api.weatherapi.com/v1/current.json?key=1a4795e3c8a64d0ba4b92322202711&q=Istanbul";

const city = document.querySelector("#data-result");
const temp = document.querySelector("#data-result-temp");
const icon = document.querySelector("#data-result-icon");
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = function(data, status) {
  const response = JSON.parse(xhr.response);
  console.log(response);
  if (xhr.status === 200) {
    city.innerHTML = response.location.name;
    temp.innerHTML = response.current.temp_c;
    icon.innerHTML = response.current.condition.icon; // dont really know how to update

  } else {
    /** .. **/
  }
}
xhr.onerror = function(err) { 
  console.log(`Network Error`, err);
};

xhr.send();

谢谢！

【问题讨论】：

标签： javascript html json api dom

【解决方案1】：

将图标元素中的innerHTML属性更改为src属性。然后就可以显示图标了。检查以下示例

var url = "https://api.weatherapi.com/v1/current.json?key=1a4795e3c8a64d0ba4b92322202711&q=Istanbul";

const city = document.querySelector("#data-result");
const temp = document.querySelector("#data-result-temp");
const icon = document.querySelector("#data-result-icon");
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = function(data, status) {
  const response = JSON.parse(xhr.response);
  console.log(response);
  if (xhr.status === 200) {
    city.innerHTML = response.location.name;
    temp.innerHTML = response.current.temp_c;
    icon.src = "https:"+response.current.condition.icon;

  } else {
    /** .. **/
  }
}
xhr.onerror = function(err) { 
  console.log(`Network Error`, err);
};

xhr.send();

<html lang="en">
<head>
 
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>weather api</title>
</head>
<body>
  <div id="data-result"></div>
  <div id="data-result-temp"></div>
  <img id="data-result-icon" src="" alt=""> 
  
</body>

</html>

【讨论】：

我收到这个奇怪的错误 "cdn.weatherapi.com/weather/64x64/day/113.png:1 GET file://cdn.weatherapi.com/weather/64x64/day/113 .png net::ERR_INVALID_URL"
你还需要加“http”icon.src = 'http:' + response.current.condition.icon;
谢谢雷内！！ :) 和 Harshana！
谢谢@RenéDatenschutz。我更新了我的答案:)
很高兴我能帮助@OnurKaradeniz

【解决方案2】：

我认为您正在寻找的是：

icon.src = response.current.condition.icon;

所以你更新的是 img 的 src 而不是 innerHTML。

你当前的代码只会返回这个：

<img id="data-result-icon" src="" alt="">//cdn.weatherapi.com/weather/64x64/day/113.png</img>

【讨论】：