关于javascript:Firebase图片阵列的异步加载

Async Load of Firebase Array of Images

我在我的Ionic项目中使用了AngularFire。我确实在上载时转换了用户图像,并将它们作为base64字符串存储在firebase中。请注意:每个图像仅占用大约60-150 KB。此外,每个用户只能拥有9张图像。

我当前正面临一个问题,当访问用户个人资料时,图像将无法加载,直到获取所有图像为止。下面是从Firebase获取图像数据数组的服务。如您所见,数据仅在$ loaded

上传递到控制器。

1
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中,而不是等待整个批处理。我该如何实现?或者有哪些替代方案

*注意:返回数据由base64strings数组组成。


FYI Firebase现在具有文件存储,因此您不必这样做。但是好吧,还是要使用base64吗?

您可以执行以下操作:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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]"/>