Question

我已经从API检索了一些图像，但是它们没有出现。绿色和蓝色的图像图标显示在我的网页上的位置上，而不是实际的图像显示。我需要更改/添加代码以使图像显示出来吗？

let html = [];
fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key="*"')
.then((resp) => resp.json())
.then(function(data) {
 data.results.slice(0, 4).forEach(res => {
  html.push(`<h1>${res.title}</h1>`)
  html.push(`<p>${res.url}</p>`)
  html.push(`<p>${res.abstract}</p>`)
  html.push(`<p>${res.published_date}</p>`)
  html.push(`<img src='${res.multimedia[4]}.url'/>`) 
  })
  document.getElementById("res").innerHTML = html.join("")
  })

     <html>
     <head>
        <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
 </script>
    <script src="index.js"></script>
</head>
<body>
    <h1>Top Stories</h1>
<button class="accordion">Story 1</button>
<div class="panel">
  <div id="res"></div>
</div>

<button class="accordion">Story 2</button>
<div class="panel">
  <div id="accordion"></div>
</div>

<button class="accordion">Story 3</button>
<div class="panel">
  <div id="accordion"></div>
</div>
<button class="accordion">Story 4</button>
<div class="panel">
  <div id="accordion"></div>
</div>
</body>

Answer 1

我认为您需要在图像中添加src而不是像这样的值：

html.push(`<img src='${res.multimedia[4].url}'/>`)

Answer 2

在HTML中，图像是用<img>标签定义的。

<img>标签为空，仅包含属性，不包含   有结束标签。

src属性指定图像的URL（Web地址）：

let html = [];


fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key=')
.then(response => response.json())
.then(data => {
   // Prints result from `response.json()` in getRequest
   data.results.slice(0, 4).forEach(res => {
      html.push(`<h1>${res.title}</h1>`)
      html.push(`<p>${res.url}</p>`)
      html.push(`<p>${res.abstract}</p>`)
      html.push(`<p>${res.published_date}</p>`)
      console.log(res.multimedia[4].url);
      html.push(`<img src='${res.multimedia[4].url}'/>`)
    })
    document.getElementById("res").innerHTML = html.join("")
})

<div id="res"></div>

对于res.multimedia[4].url的src，应使用img。

res.multimedia[4]仍然是具有大量信息的对象。您可以只使用对象中的src网址并将其用作img源。

Answer 3

尝试

html.push(`<img src='${res.multimedia[4]}'/>`)

代替此

html.push(`<image>${res.multimedia[4]}</image>`)

来自API的图片未显示

3 个答案: