イオン性のs3の画像の一覧を表示/ストリーム

Question

モバイル経由でアップロードした画像のホスティングを、サーバーのローカルストレージではなく、公開されていないAWS S3に転送したいと考えています。課題は、最も効率的な方法で画像を表示/ストリームする方法と、携帯電話のメモリ消費を制限する方法です。AWS S3サーバーにリクエストを送信してファイルURLとして提供するからです。

documentationでは、イメージURLをs3.getSignedUrl経由で表示できます。このURLには、保護されたURLの応答があります。イオンモバイルアプリで

var s3 = new AWS.S3(); 
var params = { 
    Bucket: 'myBucket', 
    Key: 'mypath/image.jpg' 
    }; 

s3.getSignedUrl ('getObject', params, function (err, url) { 
     console.log(url); 
    }); 

、我々は効率的にロードするために他の人を待たずに画像をロードするためにimage-lazy-srcを使用していました。ここで課題は、S3の遅延ロードを実装する方法です。私はs3からイメージURLをダウンロード/要求したディレクティブを作成し、イメージを読み込むためにimage-lazy-srcを使用することを考えていました。あなたがあなたのリストにあるイメージの数に依存して、S3への連続したN回のリクエストを送信するので、これがお勧めの方法であるかどうかは分かりません。

Answer 1

私たちは一時的な解決法または代替案を見つけることができました。最初にawsのURLをダウンロードし、それをimage-lazy-srcイメージローダにロードするために、image-lazy-srcディレクティブを編集し、S3で新しいものを作成しました。

var s3_url; 
if ($scope.imageLazyBackgroundImage == "true") { 

    var bgImg = new Image(); 
    bgImg.onload = function() { 
     if ($attributes.imageLazyLoader) { 
      loader.remove(); 
     } 
     $element[0].style.backgroundImage = 'url(' + s3_url + ')'; // set style attribute on element (it will load image) 
     if ($scope.lazyScrollResize == "true") { 
      //Call the resize to recalculate the size of the screen 
      $ionicScrollDelegate.resize(); 
     } 
    }; 

    bgImg.src = s3_url; 


    } else { 
    //Download the aws image url and then assign it to the created image 
    AwsService.generateAwsUrl('test').then(function(url){ 
     s3_url= url; 
     $element[0].src = s3_url;// set src attribute on element (it will load image) 
    },function(error) { 
     console.log(error); 
    }); 
    } 
}