Question

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

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

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

$ loaded：返回在初始数组数据时解析的promise 已从数据库下载。承诺解决了 $ firebaseArray。

我基本上需要的是每个图像在到达时都会添加到 ng-repeat ，而不是等待整个批次。我怎样才能实现这一目标或有哪些替代方案

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

组成

Answer 1

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

Firebase图像阵列的异步加载

1 个答案: