離子s3中的圖像視圖/流列表

Question

我們希望將通過移動方式上傳的圖像託管到AWS S3（圖像未公開查看）而不是服務器本地存儲。面臨的挑戰是，如何以最有效的方式查看/流式傳輸圖像，並限制手機的內存消耗，因爲我們將向AWS S3服務器發送請求以提供文件url。

在documentation中，我們可以通過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

我們能夠找到臨時解決方案或替代方案。我們編輯了指令image-lazy-src並使用S3創建了一個新的下載aws url，然後將其加載到image-lazy-src圖像加載器。

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); 
    }); 
    } 
}