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