Question

我想要实现的目标：

当用户点击图像占位符时，图像从服务器下载到设备（到特定位置），然后将下载的图像路径（从设备）存储在$ scope中并显示给用户。

以下是我的控制器

.controller('NDetailCtrl', function($scope, $state,$stateParams,$ionicLoading,$ionicHistory,$timeout,$cordovaFile,$cordovaFileTransfer) {

    $scope.image = '';

    // triggered on click
    $scope.downloadFile = function(image) {

    var url = "http://app.example.org/uploads/"+image ;
    var filename = url.split("/").pop();

    var targetPath = cordova.file.externalRootDirectory+filename;
    var trustHosts = true;
    var options = {};


$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
  .then(function(result) {

    // Success!

    console.log(JSON.stringify(result));

    $scope.resource =  result.nativeURL;
    // This return the file location as
    // file:///storage/emulated/0/[filename]
    $scope.image = true;

    console.log($scope.resource);

  }, function(error) {
    // Error
    alert('Error : Some Thing went wrong !');

  }, function (progress) {
    $timeout(function () {
      $scope.downloadProgress = (progress.loaded / progress.total) * 100;
    });
  });

};

})

我有白名单配置，这个插入了side deviceready事件

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|file|blob|cdvfile|content):|data:image\//);

当我尝试使用ng-src加载返回的路径时，它不显示任何内容，只是一个空白空格。

更新：重建应用后，发现该问题仅在离子--livereload上存在。

Answer 1

在livereload模式下，应用程序通过本地服务器提供，它不支持任何cordova设备插件，如文件，文件浏览器等。。

在-livereload（UPDATED）中，Angular ng-src无法加载图像

1 个答案: