【问题标题】：How to link Image with Updating JSON/API Key Data and display it to HTML Webpage如何将图像与更新 JSON/API 密钥数据链接并将其显示到 HTML 网页
【发布时间】：2019-05-11 17:41:39
【问题描述】：

我在做一个有趣的项目时遇到了一些麻烦。现在，这个项目的主要功能只是每天用 API Key 炫耀一条太空探索新闻。文字效果很好，但我不知道如何为每一天放置正确的图片。

我尝试过使用 XMLHttp 请求调用它，以及使用字符串在外部显示数据。

我觉得我错过了一些明显的东西。

当前的JSon在这里，每次更新时我要不断调用的就是HDURL，让观看者不卡在一张图上：

{"copyright":"Devin Boggs","date":"2019-05-11","explanation":"The Milky Way doesn't look quite this colorful and bright to the eye, but a rocket launch does. So a separate deep exposure with a sensitive digital camera was used in this composite skyscape to bring out our galaxy's central crowded starfields and cosmic dust clouds. In the scene from Merritt Island National Wildlife Refuge, a nine minute long exposure begun about 20 minutes after the Miky Way image recorded a rocket launch and landing. The Falcon 9 rocket, named for the Millennium Falcon of Star Wars fame, appropriately launched a Dragon resupply ship to the International Space Station in the early morning hours of May the 4th. The plume and flare at the peak of the launch arc mark the rocket's first stage boost back burn. Two shorter diagonal streaks are the rocket engines bringing the Falcon 9 stage back to an offshore landing on autonomous drone ship Of course I Still Love You.","hdurl":"https://apod.nasa.gov/apod/image/1905/crs17spaceXboggs.jpg","media_type":"image","service_version":"v1","title":"Milky Way, Launch, and Landing","url":"https://apod.nasa.gov/apod/image/1905/crs17spaceXboggs1024.jpg"}

JS 在这里：

var header = document.querySelector("header");
    var image = document.querySelector("images");
    var section = document.querySelector("info");
    var div = document.querySelector("misc");
    var requestURL = "https://api.nasa.gov/planetary/apod?api_key=yoCLrO1qrJoLzGQx3yNNL2OWgey7e7s7aTEGj5PK";
    var request = new XMLHttpRequest();
    request.open("GET", requestURL);
    request.responseType = "json";
    request.send();
    request.onload = function() {
      var loveSpace = request.response;
      populateHeader(loveSpace);
      showKnowledge(loveSpace);
    }
    function populateHeader(jsonObj) {
      var myH1 = document.createElement("h1");
      myH1.textContent = jsonObj["title"] + ' \n(Retrieved on:) ' + jsonObj["date"];
      header.appendChild(myH1);
      var myPara = document.createElement("h2");
      myPara.textContent = "Story: " + '\n' + jsonObj["explanation"];
      header.appendChild(myPara);
     var myMisc = document.createElement("p");
myMisc.textContent = "Follow APOD on: Instagram, Facebook,  Reddit, or Twitter." + ' ' + "Service Version: " + jsonObj["service_version"];
header.appendChild(myMisc);
    }

还有 HTML：

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Final</title>
  <style>
  </style>
</head>
<body>
  <header>
    </br>
  </header>
  <image src="https://apod.nasa.gov/apod/image/1905/crs17spaceXboggs.jpg">
  </br>
</section>
</br>
  <section id="info">
  </section>
  </br>
  <section id="misc">
</section>
  </br>
  <script src="space.js">                   
  </script>
</body>
</html>

我的预期结果是显示所有数据，而不仅仅是文本信息。

感谢任何和所有想法。感谢您的帮助！

【问题讨论】：

标签： javascript json image api-key

【解决方案1】：

更新

HTML 和 JS 中的一些更正。试试这个，如果它是你所期望的，告诉我

var header = document.querySelector("header");
var image = document.querySelector("section#img");
var section = document.querySelector("info");
var div = document.querySelector("misc");
var requestURL = "https://api.nasa.gov/planetary/apod?api_key=yoCLrO1qrJoLzGQx3yNNL2OWgey7e7s7aTEGj5PK";
var request = new XMLHttpRequest();
request.open("GET", requestURL);
request.responseType = "json";
request.send();
request.onload = function() {
    var loveSpace = request.response;
    populateHeader(loveSpace);
    otherData(loveSpace);
}
function populateHeader(jsonObj) {
    var myH1 = document.createElement("h1");
    myH1.textContent = jsonObj["title"] + ' \n(Retrieved on:) ' + jsonObj["date"];
    header.appendChild(myH1);
    var myPara = document.createElement("h2");
    myPara.textContent = "Story: " + '\n' + jsonObj["explanation"];
    header.appendChild(myPara);
    var myMisc = document.createElement("p");
    myMisc.textContent = "Follow APOD on: Instagram, Facebook,  Reddit, or Twitter." + ' ' + "Service Version: " + jsonObj["service_version"];
    header.appendChild(myMisc);
}
function otherData(jsonObj) {
    var myImg = document.createElement("img");
    myImg.src = jsonObj["hdurl"];
    image.appendChild(myImg);
}

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Final</title>
  <style>
  </style>
</head>
<body>
  <header>
    <br />
  </header>
  <section id="img"></section>
  <br />
  <section id="info"></section>
  <br />
  <section id="misc"></section>
  <br />
  <script src="space.js"></script>
</body>
</html>

旧答案

图片的正确标签是<img src="url" />，而不是<image src="url" />。

尝试纠正，你也会看到图像。

【讨论】：

啊，我看到我在匆忙中犯了一点错误，抱歉。那么，嗯，除此之外，还有什么可以建议的吗？我真正需要的只是朝着正确的方向前进。
我编辑了旧答案。让我知道这是否是您需要的。
是的，效果很好！非常感谢，那个小问题快把我逼疯了！我现在对如何改进它当然有更大的想法！再次，非常感谢！
不客气。如果您觉得可以，请记得接受答案。