Javascript 为什么我在试图从美国宇航局加载当天的照片时总是出现404错误？_Javascript_Html

Javascript 为什么我在试图从美国宇航局加载当天的照片时总是出现404错误？

javascript html

Javascript 为什么我在试图从美国宇航局加载当天的照片时总是出现404错误？,javascript,html,Javascript,Html,我正在处理美国宇航局当天的天文学图片，我已经设法提取了图片的描述，图片的标题，以及谁拍了这张照片。我唯一缺少的是中心部分本身，这是美国宇航局的真实照片。当我看我的控制台时，我不断得到一个404错误 “获取‘宽度：100%’/400（错误请求）” 我相信这是一个错误获取图片的url，但我不知道如何修复它。下面是我使用的带有脚本的HTML <!doctype html> <html> <head> <meta charset="utf-8">

我正在处理美国宇航局当天的天文学图片，我已经设法提取了图片的描述，图片的标题，以及谁拍了这张照片。我唯一缺少的是中心部分本身，这是美国宇航局的真实照片。当我看我的控制台时，我不断得到一个404错误 “获取‘宽度：100%’/400（错误请求）”

我相信这是一个错误获取图片的url，但我不知道如何修复它。下面是我使用的带有脚本的HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title> NASA API Demo </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="output">
    <thing id="img"></thing>
    <p id = "copyright"> </p>
    <h1 id = "title"></h1>
    <p id="explanation"> </p>
</div>
<script>
        fetch('https://api.nasa.gov/planetary/apod?api_key=(My Key Here)
    .then((response) => {
        return response.json();
    })
    .then((endUpWith) => {
        document.getElementById("img").innerHTML="<img src=" +endUpWith.url+ "style='width:100%'/>";

        document.getElementById("copyright").innerHTML="By " + endUpWith.copyright;
        document.getElementById("title").innerHTML=endUpWith.title;
        document.getElementById("explanation").innerHTML=endUpWith.explanation;

    });
</script>
</body>
</html>


NASA API演示


取（'https://api.nasa.gov/planetary/apod?api_key=（我的钥匙在这里）
。然后（（响应）=>{
返回response.json（）；
})
.然后（（endUpWith）=>{
document.getElementById（“img”）.innerHTML=“”；
document.getElementById（“版权”）.innerHTML=“By”+endUpWith.copyright；
document.getElementById（“title”）.innerHTML=endUpWith.title；
document.getElementById（“解释”）.innerHTML=endUpWith.explation；
});

检查您添加到页面中的元素。它看起来像

<img src=https://apod.nasa.gov/apod/image/2004/WindmillStarTrails1024.jpgstyle='width:100%' />

因为您没有使用引号，并且url连接到样式属性。请在源代码周围添加引号，然后添加空格

"<img src='" +endUpWith.url + "' style='width:100%'/>"
          ^                    ^^

“”
^                    ^^

检查您添加到页面中的元素。它看起来像

<img src=https://apod.nasa.gov/apod/image/2004/WindmillStarTrails1024.jpgstyle='width:100%' />

因为您没有使用引号，并且url连接到样式属性。请在源代码周围添加引号，然后添加空格

"<img src='" +endUpWith.url + "' style='width:100%'/>"
          ^                    ^^

“”
^                    ^^

我会将双引号转换为单引号，至少对于这一行：

document.getElementById("img").innerHTML='<img src="' +endUpWith.url+ '" style="width:100%"/>';

document.getElementById（“img”）.innerHTML=''；

更容易阅读。实际上，我建议使用单引号来处理JS字符串。

我会将双引号转换为单引号，至少在这一行：

document.getElementById("img").innerHTML='<img src="' +endUpWith.url+ '" style="width:100%"/>';

document.getElementById（“img”）.innerHTML=''；

更容易阅读。实际上，我建议用单引号处理JS字符串