Javascript。显示来自 API 调用的图像。如何？为什么？

Question

我正在尝试显示来自 API 调用的信息，但我没有显示图像。 奇怪的是他们在这里做，但不是在我的浏览器中通过来自 VScode 的实时服务器。 有谁明白我做错了什么？ 我很感谢任何可能有帮助的建议。

 const url = "https://api.spacexdata.com/v4/crew"; const resultsContainer = document.querySelector(".crew_box"); async function fetchInfo() { try { const response = await fetch(url); const results = await response.json(); console.log(results); results.forEach(function (crew) { resultsContainer.innerHTML += ` <div class="crew_box"><img src="${crew.image}" <h6>${crew.name}</h6> <h6>${crew.agency}</h6> </div>`; }); } catch (error) { console.log(error); resultsContainer.innerHTML = message("error", error); } } fetchInfo();

 .crew_box { padding: 15px; }.crew_box > img { max-width: 90%; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>About </title> <link rel="stylesheet" href="css/about,css" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> </head> <body> </div> <div class="crew_box"> <h5>Our Crew</h5> </div> </section> <footer> </footer> <script src="js/about.js"></script> </body> </html>

Answer 1

可能有一个来自 imgur 的检查https ，您可以使用http-server或ngrok绕过它。

确保全局安装任一软件包。

npm install -g http-server

或者

npm i -g ngrok

Answer 2

您没有关闭模板文字中的<img/>标签。 导致403原因超出了我的范围。 尽管您示例中响应的image属性不同并且确实有效。

 const url = "https://api.spacexdata.com/v4/crew"; const resultsContainer = document.querySelector(".crew_box"); async function fetchInfo() { try { const response = await fetch(url); const results = await response.json(); results.forEach(function (crew) { resultsContainer.innerHTML += ` <div class="crew_box"> <img src="${crew.image}" /> <h6>${crew.name}</h6> <h6>${crew.agency}</h6> </div>`; }); } catch (error) { console.log(error); resultsContainer.innerHTML = message("error", error); } } fetchInfo();

 .crew_box { padding: 15px; } .crew_box>img { max-width: 90%; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>About </title> <link rel="stylesheet" href="css/about.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> </div> <div class="crew_box"> <h5>Our Crew</h5> </div> </section> <footer> </footer> <script src="js/about.js"></script> </body> </html>

Answer 3

您可能需要确保在图像完全加载后插入新数据，如下所示：

 const url = "https://api.spacexdata.com/v4/crew"; const resultsContainer = document.querySelector(".crew_box"); async function fetchInfo() { try { const response = await fetch(url); const results = await response.json(); results.forEach(function (crew) { const crewBox = document.createElement('div'); const crewImg = new Image(); crewImg.src = crew.image; crewBox.classList.add('crew_box'); crewImg.onload = function() { crewBox.prepend(crewImg); crewBox.innerHTML += ` <h6>${crew.name}</h6> <h6>${crew.agency}</h6> `; } resultsContainer.appendChild(crewBox); }); } catch (error) { console.log(error); resultsContainer.innerHTML = message("error", error); } } fetchInfo();

 .crew_box { padding: 15px; } .crew_box > img { max-width: 90%; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>About </title> <link rel="stylesheet" href="css/about.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <div class="crew_box"> <h5>Our Crew</h5> </div> </body> </html>

Answer 4

HTML：

<div id="crypto"></div>

JS：

fetch("urlAddress")
    .then(res => {
        if (!res.ok) {
            throw Error("Something went wrong")
        }
        return res.json()
    })
    .then(data => {
        **document.getElementById("crypto").innerHTML = `
            <img src=${objectName.imageName}>**
          `    
    })
    .catch(err => console.error(err))

Javascript。显示来自 API 调用的图像。如何？为什么？

问题描述

4 个解决方案

解决方案1
0 2020-09-26 14:10:55

解决方案2
0 2020-09-26 14:13:26

解决方案3
0 2020-09-26 14:28:28

解决方案4
0 2022-07-31 14:21:58

Javascript。 显示来自 API 调用的图像。 如何？ 为什么？

问题描述

4 个解决方案

解决方案1 0 2020-09-26 14:10:55

解决方案2 0 2020-09-26 14:13:26

解决方案3 0 2020-09-26 14:28:28

解决方案4 0 2022-07-31 14:21:58

Javascript。显示来自 API 调用的图像。如何？为什么？

解决方案1
0 2020-09-26 14:10:55

解决方案2
0 2020-09-26 14:13:26

解决方案3
0 2020-09-26 14:28:28

解决方案4
0 2022-07-31 14:21:58