Question

我正在为我的课程结论构建一个带有Ionic的应用程序（我真的很匆忙，因为我还有2周的时间）而且我遇到了ngcordova Camera Plugin问题。在模拟器上进行测试时，相机工作正常，在我的设备上不会出现图像。它也没有显示破裂的图像图标，只是一个空白方块。在模拟器上，我尝试使用3个不同的Android API版本：17,19和22（它适用于所有3个版本），但在我的带有API 22的设备上它不起作用。

我正在使用Genymotion模拟器和＆gt;离子运行android ，这是我得到的： Emulator: Xperia Z - android 4.2.2 API 17

但是当我尝试＆gt;离子生成android 并将其安装在我的设备上，这就是我得到的：

Device: Xperia Z2 - Android 5.1 API 22

对于所有页面上的所有图像，如果我拍摄图片或从图书馆获取图像，就像这样。这是我的代码（图片来自哪里）：

form.html（这是一个模态）：

<div class="list">
    <label class="item item-input item-floating-label">
      <span class="input-label">Nome</span>
      <input type="text" placeholder="Nome" ng-model="nomeperfil">
    </label>
    <label class="item item-input item-floating-label">
      <span class="input-label">Sobrenome</span>
      <input type="text" placeholder="Sobrenome" ng-model="snperfil">
    </label>
    <button class="button button-block button-royal" ng-click="escolhefotoperfil()">Escolha uma foto para o perfil!</button>
    <img id="fotoperfil" class="picture" ng-model="fotoperfil" ng-show="fotoperfil !== undefined" ng-src="{{'data:image/jpeg;base64,'+fotoperfil}}"></img>
    <br /><br />
    <button class="button button-block button-calm" ng-click="salvarUsuario(nomeperfil, snperfil, fotoperfil)">Salvar</button>
  </div>

我的页面控制器是模态启动（只是相机部分，如果需要我会添加更多代码）：

.controller('AppCtrl', function($scope, $rootScope, $ionicModal, $cordovaNetwork, $localStorage, $ionicPopup, $cordovaCamera, $state, $ionicPlatform, client) {
   $scope.escolhefotoperfil = function(){
   var options = {
     quality: 50,
     destinationType: 0,
     sourceType: 0,
     allowEdit: true,
     encodingType: 1,
     targetWidth: 300,
     targetHeight: 300,
     popoverOptions: CameraPopoverOptions,
     saveToPhotoAlbum: false
   };

   $cordovaCamera.getPicture(options).then(function (imageData) {
      $scope.fotoperfil = imageData;
   }, function (err) {
     $scope.errofoto = "Erro ao escolher foto: " + err.message;
   });
 };
});

我试过了：

重新安装插件
重新安装平台
将 DATA_URL 更改为 FILE_URI
从＆lt; 中取出'数据：image / jpeg; base64，' img＆gt; 标记并在 imageData

的函数上使用它

有人能帮助我吗？

修改

使用 Chrome Inspect ，在尝试加载图片时显示以下错误：

拒绝加载图片，因为它违反了以下内容安全策略指令：“default-src *”。请注意，'img-src'未明确设置，因此'default-src'用作后备。 on ionic.bundle.js：16438

现在我将 img-src'self'*; 添加到索引上的元标记中，错误更改为：

拒绝加载图片，因为它违反了以下内容安全策略指令：“img-src *”。

Answer 1

1）在你的情况下，我看到的错误是在这一行

$scope.fotoperfil = imageData;在 imageData 中，您只有base64字符串，因此您无法在UI中进行竞争

应该是这样的$ scope.fotoperfil =“data：image / jpeg; base64，”+ imageData;这里数据：image / jpeg; base64 这将你的base64字符串转换为.jpeg图像。

2）你的 img 标签中应该有一个占位符来查看拍照。

3）调用相机的简便方法请跟随Nic Raboy blog。

将您的html UI img 标记更改为此

<img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
<img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">

并添加

<script src="js/ng-cordova.min.js"></script>

在你的HTML中。

并像这样更改你的模块

angular.module('starter', ['ionic', 'ngCordova'])

根据您的需要，您可以根据此ng-Cordova camera选择 DATA_URL 或 FILE_URI 。

Answer 2

请尝试更改 img-src'self'*; 至 img-src'自我'数据：; 这应该允许通过数据方案加载资源（例如Base64编码图像）。

ngCordova相机可在模拟器上运行，但不适用于设备

2 个答案: