在离子视图中从图库中拍摄或选择图片后没有图片预览答案

【问题标题】：No picture preview after taking or selecting picture from gallery in ionic view在离子视图中从图库中拍摄或选择图片后没有图片预览
【发布时间】：2017-03-08 18:03:21
【问题描述】：

我认为有以下代码：

    <div class="ponkey-add-top">
        <button class="button add-picture" ng-click="popover.show($event)"><i class="fa fa-plus"></i>Add picture</button><br />
        <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}" class="take_picture">
        <label class="item item-input">
            <textarea class="ponkey-add-note-textarea" ng-model="data.text" placeholder="Your note..."></textarea>
        </label>
    </div>

从我的图库中选择图片或拍照后，预览不会显示。这适用于 iOS 而不是 Android。现在它不能在两种设备上运行。

控制器有这个：

        $cordovaCamera.getPicture(options).then(function (imageData) {
            $scope.imgURI = "data:image/jpeg;base64," + imageData;
            $scope.image = imageData;
            $scope.popover.hide();
        });

提交时，图片数据被发送到服务器，所以图片存在。

我是否忽略了什么？

【问题讨论】：

标签： cordova ionic-framework cordova-plugins

【解决方案1】：

cordova-imagePicker

用于多图像选择 - 为 iOS 和 Android 4.0 实现及以上。

只需运行此命令即可安装

cordova plugin add cordova-plugin-image-picker

示例 - 获取全尺寸图像（所有默认选项）：

  module.controller('ThisCtrl', function($scope, $cordovaImagePicker) {

  var options = {
   maximumImagesCount: 10,
   width: 800,
   height: 800,
   quality: 80
  };

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

【讨论】：

好吧，我这样做的方式就像记录在案的那样，只有图片没有显示在视图中。你给出的例子，仍然没有告诉我如何在离子视图中显示它
它只是从图库中循环所有图像 uri。现在您可以将该图像 uri 设置为图像 src。
我们不是在函数中这样做吗？ $scope.imgURI = "data:image/jpeg;base64," + imageData;
在这种情况下，您将获得最近捕获的图像。
这就是我想要的。它只是没有显示在视图中。在 Android 中，我得到一个损坏的图像图标，而在 iOS 中，我得到一个空白空间

【解决方案2】：

我终于知道我必须做什么了。问题中发布的功能和视图是正确的。

但在 index.html 中，我必须使用 img-src 'self' data: 指定更多 Content-Security-Policy 并将以下代码添加到 apps.js：

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

【讨论】：