Javascript Firebase getDownloadURL

Question

我想使用 Firebase 存储通过 javascript 在我的网页上显示几张图片。 我用：

getDownloadURL(ref(storage, imageIndexPathRoot)).then((url) =>{
img.setAttribute('src', url);

问题是只显示最后一张图片。如果我有例如我的文件夹中有 5 张图片，带有 imageIndexPathRoot 的 getDownload 行对所有 5 张图片都正确执行，但仅在最后一张图片上执行 img.setAttribute... 行，并且该图片不会显示在网页上。

    // Now we get the references of these images
   listAll(listRef).then((res) => {
     res.items.forEach(function(imageRef) {
      // And finally display them
      console.log(imageRef);
      displayImage(imageRef);
     });
    }).catch((error) => {
    // Handle any errors
    console.log("Error 1");
    });

  function displayImage(imageRef) {
    const img = document.getElementById('tierFoto');
    img.src = imageRef.fullPath;
    getDownloadURL(ref(storage, imageIndexPathRoot)).then((url) =>{
    img.setAttribute('src', url);
    })
    .catch((error) => {
      console.log(error);
    });
  }
}

Answer 1

每次displayImage 被调用时，它都会：

const img = document.getElementById('tierFoto')

因此它将每张图片设置为相同的 HTML 元素，这就解释了为什么您只能看到最后一张图片。

---

如果您想在每次调用 displayImage 时显示单独的图像，则每次都需要获取（或传入）不同的 HTML 元素。如何做到这一点，取决于您的 HTML 结构。

例如，如果您的 HTML 包含带有编号 ID 的 img 元素，您可以这样做：

res.items.forEach(function(imageRef, i) { // ? get index from forEacj
  displayImage(imageRef, i); // ? pass it to displayImage
});

然后

function displayImage(imageRef, index) { // get index from caller
  const img = document.getElementById('tierFoto-'+index); // use index to look up element
  ...