Firebase异步加载阵列图像

问题描述：

我正在使用AngularFire和我的Ionic项目。我将上传的用户图像转换成firebase中的base64字符串。请注意：每张图片只需约60-150 KB。另外每个用户只能有9个图像。Firebase异步加载阵列图像

我目前正面临一个问题，当用户配置文件被访问时，图像将无法加载，直到所有的图像被提取。下面是从获取图像火力地堡的数据阵列..正如你所看到的数据只传递给加载

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

$装上$控制器的服务：返回其解决的承诺时，从数据库中下载了初始阵列数据。该承诺解析为 $ firebaseArray。

我基本上需要的是被添加到NG重复每个图像到达时，而不是等待整批。我怎样才能做到这一点还是有什么办法

*注：返回数据包括base64strings

答

阵列的FYI火力地堡现在有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异步加载阵列图像

相关推荐