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