javascript - 从 Firebase 存储下载多个图像

Question

我正在迈出 Firebase Storage Web 的第一步，我承认 Javascript 也不是我的专长。

我有一个包含人员姓名列表的网页 (PHP)，我想在姓名旁边显示他们的照片。图片保存在 Firebase 存储文件夹中。

这是一个简单的 html 示例(用 PHP 生成):

<div id="people_list">
    <div class="list_row">
        <div class="photo">
            <img id="photo1" src="images/stdphoto.png" width="50" height="50">
        </div>
        <div class="name">
            People Name 1
        </div>
    </div>
    <div class="list_row">
        <div class="photo">
            <img id="photo2" src="images/stdphoto.png" width="50" height="50">
        </div>
        <div class="name">
            People Name 2
        </div>
    </div>
</div>

我已经按照本页 https://firebase.google.com/docs/web/setup 中的说明添加了 Firebase API并像这样初始化它:

firebase.initializeApp(config);
firebase.auth().signInAnonymously(); // Ignoring security for now

这是我加载一张照片的代码。效果很好!

var storage = firebase.storage();
var refPath = storage.ref('photos/johnnydepp.jpg');
refPath.getDownloadURL().then(function(url) {
    document.getElementById('photo1').src = url;
}).catch(function(error) {
    console.log(error);
});

但现在我试图加载页面中的所有图像，所以我创建了一个带有文件名的 Javascript 数组变量(用 PHP 加载)，并且这样做了:

var photos = ["johnnydepp", "jimcarrey", "emmawatson"];

var photoId = 0;
var refPath = null;
var storage = firebase.storage();
for (var i = 0; i <= photos.length - 1; i++) {
    photoId = i + 1;
    refPath = storage.ref('photos/' + photos[i] + '.jpg');
    refPath.getDownloadURL().then(function(url) {
        document.getElementById('photo' + photoId).src = url;
    }).catch(function(error) {
        console.log(error);
    });
}

我不知道为什么，但只加载了列表中的最后一张照片。 Javascript 控制台中没有错误。

拜托，你知道我做错了什么吗？谢谢!

编辑(我的解决方案):

const promises = [];

photos.forEach(val => {
    const promise = firebase.storage()
        .ref('photos/' + val + '.jpg')
        .getDownloadURL()
        .catch(err => {
            console.log('error', err);
            return "";
        })
        .then(fileUrl => {
            return fileUrl;
        });
    promises.push(promise);
});

Promise.all(promises)
    .catch(err => {
        console.log('error', err);
    })
    .then(urls => {
        for (var i = 0; i <= urls.length - 1; i++) {
            if (urls[i] != '') {
                document.getElementById('photo' + (i + 1)).src = urls[i];
            }
        }
});

Answer 1

获取下载 url 是异步请求( promise )，您执行下一个循环而不让前一个循环完成，因此只有最后一个被完全执行。

我建议您采取不同的方法。

var photos = ["johnnydepp", "jimcarrey", "emmawatson"];

var photoId = 0;
var storage = firebase.storage();
var promises = [];
for (var i = 0; i <= photos.length - 1; i++) {
    photoId = i + 1;
    promises.push(storage.ref('photos/' + photos[i] + '.jpg').getDownloadURL());
}

photoId = 0;
Promise.all(promises, data => {
    for (var i = 0; i <= photos.length - 1; i++) {
        photoId = i + 1;
        document.getElementById('photo' + photoId).src = data[i];
    }
});