我正在迈出使用 Firebase Storage Web 的第一步,并承认 Javascript 也不是我的专长。
我有一个网页(PHP),其中包含人员姓名列表,我想在姓名旁边显示他们各自的照片。图像保存在 Firebase Storage 文件夹中。
这是一个简单的 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];
}
}
});
最佳答案
获取下载网址是异步请求( 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];
}
});
关于javascript - 从 Firebase 存储下载多个图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45218991/