如何使用自己的照片实现无限滚动效果

问题描述

我有一个无限滚动项目，我真的不想使用像 picsum 和 unsplash 这样的 API 来生成随机照片。我想使用来自互联网上某处或本地保存的我自己的照片。我按照教程使我的照片库无限滚动，但我不明白如何将 picsum url 更改为其他内容。最好是本地保存的照片。例如，我可以用 1 到 20 的数字命名它们，但是我该如何编写“获取”部分？

const getimages = async function() {
  const getimageRes = await fetch(
    `https://picsum.photos/v2/list?page=${page}&limit=8`
  );
  const data = await getimageRes.json();
  const loading = document.querySelector(".loading");

  for (let i = 0; i < 8; i++) {
    let ele = document.createElement("img");
    ele.setAttribute("src",data[i].download_url);
    ele.setAttribute("height","384");
    ele.setAttribute("width","512");
    document.getElementById("container").appendChild(ele);
  }
  page++;
  loading.classList.remove("show");
};

解决方法

const imageSources = [ // Put your image sources in this list
  './images/1.jpg','./images/2.jpg','./images/3.jpg','./images/4.jpg','./images/5.jpg'
]

for (let i = 0; i < 5; i++) { // Change this 5 to however many images you have (or use for ... in) 
    let ele = document.createElement("img");
    ele.setAttribute("src",imageSources[i]);
    ele.setAttribute("height","384");
    ele.setAttribute("width","512");
    document.getElementById("container").appendChild(ele);
  }
  page++;
  loading.classList.remove("show");
};