Отображение изображения из подборщика изображений?

Question

Я хотел бы показать изображение, которое я получаю от подборщика изображений. Проблема в том, что изображение не отображается. Вот мой код:

<img ng-src="{{images[0].src}}" width="100%" /> 

var options = { 
     maximumImagesCount: 1, 
     width: 200, 
     height: 200, 
     quality: 80 
    }; 

    $scope.imagePressed = function() { 
     $cordovaImagePicker.getPictures(options) 
      .then(function (imagePath) { 

       console.log(imagePath); 

       $scope.images[0].src = imagePath; 

      }, function(error) { 
       // error getting photos 
      }); 
    } 

Выход из console.log(imagePath) является:

файл: ///data/data/com.ionicframework.oo943640/cache/tmp_Screenshot_2015-12-12-13-23 -141582014060.png

Но изображение не отображается.

Answer 1

ознакомиться следующий код:

HTML файл

<button class="button button-block button-balanced" ng-click="imagePressed()"> 

<p ng-repeat="img in images"> 
    <img ng-src="{{img}}" /> 
</p> 

controller.js файл

$scope.images = []; 

     var options = { 
       maximumImagesCount: 1, 
       width: 200, 
       height: 200, 
       quality: 80 
      }; 

      $scope.imagePressed = function() { 
       $cordovaImagePicker.getPictures(options) 
        .then(function (results) { 

        for (var i = 0; i < results.length; i++) { 
        $scope.images.push(results); 
        console.log('Image URI: ' + results[i]); 
        } 
        }, function(error) { 
         // error getting photos 
        }); 
      } 

Answer 2

Вы пытаетесь привязать к примитивному элементу в массиве. Это не будет работать из-за того, как Angular справляется с этой ситуацией. Вместо этого вы можете привязать объект к массиву. Попробуйте что-то вроде:

<img ng-src="{{images[0].path}}" width="100%" /> 

и

$scope.images[0].src = {path: imagePath}; 

Answer 3

Я нашел проблему. Во-первых, изображение должно быть преобразовано в base64. В качестве руководства я использовал http://www.clearlyinnovative.com/ionic-framework-camera-image-uploads-and-base64-strings. Это мой фрагмент кода:

$scope.imagePressed = function (number) { 

      $cordovaImagePicker.getPictures(options) 
       .then(function (imagePath) { 

Camera.toBase64Image(imagePath.toString()).then(function (base64string) { 

        $scope.images[number].src = "data:image/jpeg;base64," + base64string.imageData.replace(/\r?\n|\r/g, ""); 
       }); 

      }, function(error) { 
       // error getting photos 
       console.log(JSON.stringify(error)); 
      }); 
     }; 

Где класс камеры от руководства, к которому я указал выше. Во-вторых, я обновил мета-тег, чтобы изображения из base64:

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

Вот и все. Надеюсь, это поможет кому-то еще с той же проблемой.