Firebaseの非同期読み込みイメージの配列

Question

私は私のイオンプロジェクトでAngularFireを使用しています。アップロード時にユーザーイメージを変換し、firebaseのbase64文字列として保存します。注：各画像は約60〜150 KBしかかかりません。また、各ユーザーはわずか9枚の画像しか持てません。

私は現在、問題が発生しています。ユーザプロファイルにアクセスすると、すべての画像が取得されるまでイメージが読み込まれません。以下はFirebaseからの画像データの配列を取得したサービスは、あなたが見ることができるようにデータをロードのみ$

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

に

をロード$上のコントローラに渡されます。..です：解決された約束を返します。初期アレイデータは がデータベースからダウンロードされています。この約束は $ firebaseArrayに解決されます。私は基本的に必要なもの

は、彼らはむしろ全体のバッチを待っているよりも、到着したとしてNGリピートに追加する各画像です。どのように私はこれを実現するか、代替

は注意*何をしていることができます：戻りデータはbase64strings

Answer 1

の配列で構成さFYI Firebaseは今file storageので、あなたがこれを行う必要はありませんしています。しかし、OK、まだ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]"/> 

：

あなたはこのような何かを行うことができます