Ionic, ngCordova - загрузка и отображение изображения из cacheDirectory

0

Я пытаюсь создать angular.factory, чтобы иметь возможность загружать изображение и отображать его в моем приложении Ionic.

Проблема в том, что я не могу отобразить загрузку img из файла file.nativeURL и т.д.

Я использую плагины ngCordova $ cordovaFile, $ cordovaFileTransfer.

Вот мой заводской код:


    app.factory('ImgDownload', function ($q, $cordovaFile, $cordovaFileTransfer) {

      function download_img(url, filePath, options, AllowAllHost){
          var q = $q.defer();
          $cordovaFileTransfer.download(url, filePath, options, AllowAllHost)
            .then(function(res) {
              q.resolve(res)
            }, function (err) {
              q.reject(err);
          });
          return q.promise
      }
      return {
           CheckFileSystemThenDownloadImg: function(url, file, StorageDirectory, directory) {
               var filePath = StorageDirectory + directory + '/' + file;
               var q = $q.defer();
               $cordovaFile.checkDir(StorageDirectory, directory).then(function () {
                    $cordovaFile.checkFile(StorageDirectory + directory + '/', file).then(function (res) {
                       q.resolve(res)
                    }, function() {
                        var options = {create : true, exclusive: false};
                        download_img(url, filePath, options, true).then(function (res) {
                           q.resolve(res);
                        }, function (err) {
                            q.reject(err)
                        })
                    })
               }, function() {
                   var options = {create : true, exclusive: false};
                   $cordovaFile.createDir(StorageDirectory, directory, true).then(function () {
                       download_img(url, filePath, options,true).then(function (res) {
                           q.resolve(res)
                           console.log(res)
                       }, function (err) {
                           console.log(err)
                           q.reject()
                       })
                   })
               });
               return q.promise
           },
           getLocalImg: function(StorageDirectory, file, directory) {
               var q = $q.defer();
               $cordovaFile.checkDir(StorageDirectory, directory).then(function () {
                   $cordovaFile.checkFile(StorageDirectory + directory + '/', file).then(function (res) {
                       q.resolve(res)
                   }, function (err) {
                       q.reject(err)
                   })
               }, function (err) {
                   q.reject(err)
               });
               return 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 file = 'CMC808071.jpg';
        var StorageDirectory = cordova.file.cacheDirectory;
        var directory = 'Images';
        ImgDownload.CheckFileSystemThenDownloadImg(url, file, StorageDirectory, directory)
          .then(function(res){
            console.log("CheckFileSystem..:" + angular.toJson(res))
          }, function(err){
            console.log(angular.toJson(err))
          })
        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))
          })
      });
    });

Мой взгляд:

<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.

Теги:
ngcordova
ionic

1 ответ

0

Похоже, вы вызываете getLocalImg до завершения CheckFileSystemThenDownloadImg. Попробуйте переместить 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))
});
  • 0
    Ты за ответ, но все еще не могу получить изображение через «nativeURL». Я пробовал также с симулятором Android и ничего там тоже.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню