javascript - Firebase 图像数组的异步加载

Question

我在 Ionic 项目中使用 AngularFire。我确实在上传时转换用户图像并将它们作为 base64 字符串存储在 firebase 中。请注意:每张图片仅需 60-150 KB 左右。此外，每个用户只能拥有 9 张图片。

我目前面临一个问题，当访问用户个人资料时，图像不会加载，直到获取所有图像。下面是从 Firebase 获取图像数据数组的服务。如您所见，数据仅在 $loaded 时传递给 Controller ​​

return $firebaseArray(API.photos.child(userKey)).$loaded();

$loaded : Returns a promise which is resolved when the initial array data has been downloaded from the database. The promise resolves to the $firebaseArray.

我基本上需要的是每张图片在到达时添加到 ng-repeat 而不是等待整批图片。我怎样才能做到这一点，或者有什么选择

*注意:返回数据是一个base64字符串数组

Answer 1

仅供引用，Firebase 现在有 file storage所以你不必这样做。但是好吧，还是想用 base64？

你可以这样做:

// get user
$scope.user = {name: 'bob', prof_imgs: [43, 44]};
// create map to store images
$scope.img_map = {};

// download each image individually and asynchronously
user.prof_imgs.forEach(function(id){
  ref.child('images/'+id).once("value", function(data) {
    $scope.img_map[id] = data;
  });
});

// display with angular
<img ng-repeat="id in user.prof_imgs" 
     data-ng-src="data:image/png;base64,{{img_map[id]}}" 
     ng-if="img_map[id]"/>