javascript - Firebase图像阵列的异步加载

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

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

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

  $ loaded：返回一个promise，当初始数组数据包含
  已从数据库下载。诺言化为
  $ firebaseArray。


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

*注意：返回数据由base64strings数组组成

最佳答案

FYI 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]"/>

关于javascript - Firebase图像阵列的异步加载，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38566129/