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 有 img 个带有编号 ID 的元素，您可以这样做：

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
  ...

Javascript Firebase getDownloadURL

Javascript Firebase getDownloadURL

html

javascript

url

firebase

firebase-storage