Ionic, ngCordova - 从 cacheDirectory 下载和显示图像

Question

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

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

我正在使用 ngCordova $cordovaFile、$cordovaFileTransfer 插件。

这是我的工厂代码：

app.factory('ImgDownload', function ($q, $cordovaFile, $cordovaFileTransfer) { 函数 download_img(url, filePath, options, AllowAllHost){ var q = $q.defer(); $cordovaFileTransfer.download(url, filePath, options, AllowAllHost) .then（函数（res）{ q.resolve(res) }，函数（错误）{ q.拒绝（错误）； }); 返回 q.promise } 返回 { CheckFileSystemThenDownloadImg: function(url, file, StorageDirectory, directory) { var filePath = StorageDirectory + 目录 + '/' + 文件； var q = $q.defer(); $cordovaFile.checkDir(StorageDirectory, 目录).then(function () { $cordovaFile.checkFile(StorageDirectory + directory + '/', file).then(function (res) { q.resolve(res) }， 功能（） { var options = {创建：真，排他：假}； download_img(url, filePath, options, true).then(function (res) { q.resolve(res); }，函数（错误）{ q.reject(错误) }) }) }， 功能（） { var options = {创建：真，排他：假}； $cordovaFile.createDir(StorageDirectory, 目录, true).then(function () { download_img(url, filePath, options,true).then(function (res) { q.resolve(res) 控制台.log(res) }，函数（错误）{ 控制台日志（错误） q.reject() }) }) }); 返回 q.promise }, getLocalImg：函数（存储目录，文件，目录）{ var q = $q.defer(); $cordovaFile.checkDir(StorageDirectory, 目录).then(function () { $cordovaFile.checkFile(StorageDirectory + directory + '/', file).then(function (res) { q.resolve(res) }，函数（错误）{ q.reject(错误) }) }，函数（错误）{ q.reject(错误) }); 返回 q.promise } } });

我的控制器：

app.controller('MainCtrl', function($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 文件 = 'CMC808071.jpg'; var StorageDirectory = cordova.file.cacheDirectory; var directory = '图片'; ImgDownload.C​​heckFileSystemThenDownloadImg(url, file, StorageDirectory, directory) .then（函数（res）{ console.log("CheckFileSystem..:" + angular.toJson(res)) }，函数（错误）{ console.log(angular.toJson(err)) }) ImgDownload.getLocalImg(StorageDirectory, 文件, 目录) .then（函数（res）{ console.log("getLocalImg:" + angular.toJson(res)) $scope.local_img_src = res }, 函数（错误）{ 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))
});