javascript - 使用 Unsplash API 时图像未填充

Question

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

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

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

像这样:

.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