如何通过更新 JSON/API 关键数据 link 图像并将其显示到 HTML 网页

Question

我只是在做一个有趣的项目时遇到了一些麻烦。现在，这个项目的主要功能就是每天用一个API键炫耀一条space探索新闻。文本工作正常，但我不知道如何为每一天放置正确的图像。

我尝试过使用 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>

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

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

Answer 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" />。

尝试更正，您也会看到图像。

如何通过更新 JSON/API 关键数据 link 图像并将其显示到 HTML 网页

How to link Image with Updating JSON/API Key Data and display it to HTML Webpage

javascript

json

image

api-key

更新

旧答案