ngCordova Kamera arbeitet auf Emulator, aber nicht auf Gerät

Question

Ich baue eine App mit Ionic für meinen Kurs Fazit (Ich habe es wirklich eilig, da ich nur noch 2 Wochen habe) und ich bin mit einem ngCordova Camera Plugin stecken Problem. Beim Testen auf dem Emulator funktioniert die Kamera einwandfrei, auf meinem Gerät erscheint kein Bild. Es zeigt auch kein gebrochenes Bildsymbol, nur ein leeres Quadrat. Auf dem Emulator habe ich versucht, 3 differents Android API-Versionen: 17, 19 und 22 (und es funktioniert auf allen 3), aber auf meinem Gerät mit einer API 22 funktioniert es nicht.

Ich verwende Genymotion Emulator und > ionische Lauf android und hier ist das, was ich bekommen: Emulator: Xperia Z - android 4.2.2 API 17

Aber wenn ich versuchen> ionische bauen android und installieren Sie es auf meinem Gerät, das ist, was ich bekomme:

Device: Xperia Z2 - Android 5.1 API 22

es ist so für alle Bilder auf allen Seiten, wenn ich das Bild gedreht oder es aus der Bibliothek erhalten. Hier ist mein Code (aus dem die Bilder kamen aus):

form.html (es ist ein modal):

<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> 

Mein Controller für die Seite wurden die modale gestartet wird (nur der Kamerateil, falls erforderlich ich werde mehr Code) hinzufügen:

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

ich habe versucht:

• Installieren Sie das Plugin
• Neu installiert Plattform
• ändern DATA_URL-FILE_URI
• herausnehmen 'Daten: image/jpeg; base64' vom < img> Tag und deren Verwendung auf der Funktion mit imagedata

Kann mir jemand helfen?

EDIT:

Mit Chrome Inspizieren es zeigt die folgende Fehlermeldung beim Versuch, ein Bild zu laden:

Refused das Bild geladen werden, da es die folgenden Content Security Policy Richtlinie verletzt: "Standard-src *". Beachten Sie, dass 'img-src' nicht explizit festgelegt wurde, daher wird 'default-src' als Fallback verwendet. auf ionic.bundle.js: 16438

Jetzt habe ich die img src- 'Selbst' add *; meinem Meta-Tag auf meinem Index, änderte sich die Fehler auf:

um das Bild zu laden Refused, weil es die folgenden Content Security Policy Richtlinie verletzt: "img src-*".

Answer 1

Bitte versuchen Sie zu ändern img-src 'self' *; bis img-src 'self' Daten :; Dies sollte das Laden von Ressourcen über das Datenschema ermöglichen (z. B. Base64-codierte Bilder).

Answer 2

1) In Ihrem Fall der Fehler, den ich sehe, ist in dieser Zeile

$scope.fotoperfil = imageData; In imagedata Sie Base64-String, so dass Sie nicht in der Lage kann in UI vie

es sein sollte Dies $ scope.fotoperfil = "Daten: image/jpeg; base64" + imageData; Hier Daten: image/jpeg; base64 dies konvertiert Ihre Base64-Zeichenfolgen in .jpeg Bild.

2) Sie sollten einen Platzhalter in Ihrem img Tag haben, um das Foto zu sehen.

3) Einfache Möglichkeit zum Aufruf der Kamera folgen Nic Raboy blog hier.

Ihr HTML-UI img-Tag in diesen

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

in Ihrem HTML

ändern

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

und hinzufügen.

und Veränderung in Ihrem Modul wie diese

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

auf Ihren Bedarf basieren, können Sie DATA_URL oder FILE_URI nach diesem ng-Cordova camera wählen.