使用Firebase Storage的getDownloadURL加载多图仅最后一张显示问题

问题原因 #

• 所有图片复用了同一个DOM元素：每次调用displayImage函数时，都通过document.getElementById('tierFoto')获取同一个img标签，getDownloadURL是异步请求，等请求返回结果时，循环已经执行完毕，img变量指向的永远是最后一次循环对应的元素，前面几次请求返回的url都会覆盖到同一个img标签上，最终只能看到最后一张图片。
• 额外错误：getDownloadURL的参数使用了固定的imageIndexPathRoot，而不是当前遍历到的imageRef，也会导致所有请求拿到的都是同一张图片的下载地址。

解决方法 #

调整思路 #

1. 不要复用同一个img元素，要么提前在页面中准备多个不同ID的img标签，要么直接在JS中动态创建img元素插入页面。
2. 修正getDownloadURL的入参，传入当前遍历到的imageRef来获取对应图片的下载地址。

修正后代码示例 #

首先在HTML中提前添加图片容器：

<!-- 用来存放所有图片的容器 -->
<div id="imageContainer"></div>

调整JS逻辑：

// 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) {
  // 动态创建新的img元素，不复用旧元素
  const img = document.createElement('img');
  // 可根据需求自定义图片样式
  img.style.width = '200px';
  img.style.margin = '8px';
  // 传入当前遍历的imageRef获取对应下载地址
  getDownloadURL(imageRef).then((url) =>{
    img.setAttribute('src', url);
    // 将生成的图片插入到页面容器中
    document.getElementById('imageContainer').appendChild(img);
  })
  .catch((error) => {
    console.log(error);
  });
}

内容的提问来源于stack exchange，提问作者Thomas Kupfer