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));
            });
        };

Camera类来自我上面指出的指南。其次，我更新了元标记以允许来自base64的图像：

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

就是这样。我希望它可以帮助其他人解决同样的问题。

从图像选择器显示图像？

3 个答案: