使用 Unsplash 时图像未填充 API

Question

我正在学习如何使用 fetch APIs，我似乎无法弄清楚为什么在使用 Unsplash API 时只显示 1 张图像。我认为这与地图有关，但我不确定。感谢任何帮助我们的指导。

document.getElementById("search").addEventListener("click", () => {
  const searchTerm = document.getElementById("searchBox").value;
  console.log(searchTerm);

  fetch(
    `https://api.unsplash.com/search/photos?client_id=e72d3972ba3ff93da57a4c0be4f0b7323346c136b73794e2a01226216076655b&query=${searchTerm}`
  )
    .then(response => response.json())
    .then(data => {
      console.log(data);
      console.log(data.results);
      let searchResults = data.results
        .map(searchResults => {
          return (document.getElementById("app").innerHTML = `<img src="${
            searchResults.urls.small
          }">`);
        })
        .join("");
    });
});

此处的代码沙箱：https://codesandbox.io/s/yq918mok29

默认应该显示 10 张图像，但只显示了 1 张。如何映射图像并将它们显示在页面上？

Answer 1

您在每次地图迭代中都覆盖了元素的内容，因此您只能看到最后一个。使用地图构建标记，然后将其放入文档中。

像这样：

.then(data => {
  let imagesMarkup = '';

  data.results
    .map(searchResults => {
      return (imagesMarkup += `<img src="${searchResults.urls.small}">`);
    }); // note that the join was removed here

    document.getElementById("app").innerHTML = imagesMarkup;
});

Demo

使用 Unsplash 时图像未填充 API

Images not populating when using Unsplash API

javascript

api

fetch-api