Ionic，ngCordova-从cacheDirectory下载并显示图像

Question

我正在尝试创建一个angular.factory，以便能够下载图像并将其显示到我的Ionic应用程序中。

问题是，我无法显示从'file.natuteURL'等下载的img。

我正在使用ngCordova$cordovaFile，$cordova FileTransfer插件。

这是我的工厂代码：

app.factory（'ImgDownload'，函数（$q，$cordovaFile，$cor多瓦FileTransfer）{函数download_img（url、filePath、options、AllowAllHost）{var q=$q.dedefe（）；$cordovaFileTransfer下载（url，filePath，options，AllowAllHost）.then（函数（res）{q.resolve（res）}，函数（错误）{拒绝（错误）；})；return q.promise}返回{CheckFileSystemThenDownloadImg:function（url，file，StorageDirectory，directory）{var filePath=StorageDirectory+目录+'/'+文件；var q=$q.dedefe（）；$cordovaFile.checkDir（StorageDirectory，directory）.then（function（）{$cordovaFile.checkFile（StorageDirectory+目录+'/'，file）.then（function（res）{q.resolve（res）}，函数（）{var选项＝{create:true，exclusive:false}；download_img（url，filePath，options，true）。然后（function（res）{q.决心（res）；}，函数（错误）{拒绝（错误）})})}，函数（）{var选项＝{create:true，exclusive:false}；$cordovaFile.createDir（StorageDirectory，directory，true）.then（function（）{download_img（url，filePath，options，true）。然后（function（res）{q.resolve（res）console.log（res）}，函数（错误）{console.log（错误）q.拒绝（）})})})；return q.promise}，getLocalImg:function（StorageDirectory，file，directory）{var q=$q.dedefe（）；$cordovaFile.checkDir（StorageDirectory，directory）.then（function（）{$cordovaFile.checkFile（StorageDirectory+目录+'/'，file）.then（function（res）{q.resolve（res）}，函数（错误）{拒绝（错误）})}，函数（错误）{拒绝（错误）})；return q.promise}}})；

我的控制器：

app.controller（'MainCtrl'，函数（$scope，$ionicPlatform，ImgDownload）{$scope.img_remote='http://yourwatch.gr/wp-content/uploads/CMC808071.jpg'$ionicPlatform.ready（function）{var url='http://yourwatch.gr/wp-content/uploads/CMC808071.jpg'；var file='CMC808071.jpg'；var StorageDirectory=cordova.file.cacheDirectory；var directory="图像"；ImgDownload.CheckFileSystemThenDownloadImg（url，file，StorageDirectory，directory）.then（函数（res）{console.log（"CheckFileSystem.："+angular.toJson（res））}，函数（错误）{console.log（angular.toJson（err））})ImgDownload.getLocalImg（存储目录、文件、目录）.then（函数（res）{console.log（"getLocalImg:"+angular.toJson（res））$scope.local_img_src=res}，函数（err）{console.log（angular.toJson（err））})})；})；

我的观点：

<img ng-src="{{ local_img_src.nativeURL }}" alt="" />

我的元内容安全策略：

<meta http-equiv="Content-Security-Policy" content="default-src * data: cdvfile://* content://* file:///*; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; media-src *">

我不明白为什么｛｛local_img_src.nativeURL｝｝没有显示。我正在开发Mac和IOS应用程序。

Answer 1

在CheckFileSystemThenDownloadImg完成之前，您似乎正在调用getLocalImg。尝试将getLocalImg移动到console.log("CheckFileSystem..:" + angular.toJson(res))旁边，如下所示：

ImgDownload.CheckFileSystemThenDownloadImg(url, file, StorageDirectory, directory)
.then(function(res){
  console.log("CheckFileSystem..:" + angular.toJson(res));
  ImgDownload.getLocalImg(StorageDirectory, file, directory)
    .then(function(res){
      console.log("getLocalImg:" + angular.toJson(res))
      $scope.local_img_src = res
    },
    function(err){
      console.log(angular.toJson(err))
    });
  }, function(err){
    console.log(angular.toJson(err))
});