图像的Firebase阵列的异步加载

Question

我在Ionic项目中使用AngularFire。我会在上传时转换用户图像，并将其存储为firebase中的base64字符串。请注意：每张图片的大小仅为60-150 KB左右。此外，每个用户只能有9个图像。

我目前面临一个问题，当访问用户配置文件时，在获取所有图像之前，图像不会加载。以下是从Firebase获取图像数据阵列的服务。。正如你所看到的，数据只在$loaded 上传递给控制器

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

$loaded：返回一个promise，当初始数组数据已从数据库中下载。承诺决心$firebaseArray。

我基本上需要的是每个图像在到达时添加到ng repeat中，而不是等待整个批次。我如何才能做到这一点，或者的替代方案是什么

*注意：返回数据由一个base64字符串数组组成

Answer 1

FYI Firebase现在有文件存储，所以您不必这样做。但好吧，还想使用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]"/>