"Nicht erlaubt zu laden, auf lokale Ressourcen" für die Lokale Bild von der Remote-Seite in PhoneGap Build

Etwas hier zu beachten für zukünftige Benutzer, die führen Sie in diesem, sicher sein, Sie sind NICHT im 'Live-Reload" - Modus, wenn die Prüfung eine Funktion wie diese. Live Reload wird im Ergebnis der gleiche Fehler-Meldung, das ist klar irreführend. Nach dem Bau von w/o-live-reload funktioniert alles Prima für mich, mit dem file:/ODER cdv:/path.

InformationsquelleAutor Nicholas Kreidberg

Ich arbeiten war ionic3 app und testen Sie die Konsole mit chrome inspector. Ich war auch laufen und die Emulation mit der --livereload Flagge, war Es nicht angezeigt Bild nicht auf dem emulator noch auf einem echten Gerät.
Ich gehe zu Den oben genannten link und importiert das Modul
import { normalizeURL } aus 'ionic-Winkel';

auf der Erfolgs-callback auf mein Bild-capture-Funktion, ich ging den Weg, wie dieses und es funktionierte wie ein Charme.

Nach der Untersuchung ein bisschen mehr, fand ich heraus, dass es ist, weil der --livereload-Flag, ich entfernt das flag von Befehl starten Sie das Programm mit dem folgenden Befehl ein, und zeigt seine Bild jetzt:

ionic cordova run android

    takePhoto() {
        this.camera.getPicture(this.getCameraOptions()).then((imageData) => {
         this.isPhotoTaken = true;
         this.photo = normalizeURL(imageData); 
         console.log("PHOTO PATH: "+ this.photo)
        }, (err) => {
            console.error('IMAGE CAPTURE ERROR: ' + err);
        });
      }

     setCameraOptions() {    
        const options = {
          quality: 100,
          sourceType: this.camera.PictureSourceType.CAMERA,
          saveToPhotoAlbum: false,
          correctOrientation: true
        };
        return options;
      }

  getCameraOptions(): CameraOptions{
    return this.setCameraOptions();
  }

InformationsquelleAutor ImFarhad

Dieser arbeitet mit ionic-3 und Sie können unten verwenden um das Problem zu beheben, für Nicht zulässig zu laden lokale resourse

Zuerst legen Sie diese Dinge im Haus.ts

import { Base64 } from '@ionic-native/base64';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from 
'@angular/platform-browser';

//inside the export class
base64Image:any;
croppedImage = null;

constructor(
  public base64:Base64,
  public domSanitizer:DomSanitizer,
) {}    

selectImage() {
const options: CameraOptions = {
  quality: 100,
  destinationType: this.camera.DestinationType.FILE_URI,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
  correctOrientation: true,
  sourceType:0,
}
  this.croppedImage = null;
  this.camera.getPicture(options).then((imageData) => {
  this.croppedImage = imageData;
  this.crop.crop(this.croppedImage, {quality: 100,targetWidth: -1, targetHeight: 
-1 })
.then(
newImage => {
  this.base64.encodeFile(newImage).then((base64File: string) => {
  let imageSrc = base64File.split(",");
  this.base64Image = 'data:image/jpeg;base64,' + imageSrc[1];
  this.croppedImage = 
  this.domSanitizer.bypassSecurityTrustUrl('data:image/jpeg;base64,' + 
imageSrc[1]);
}, (err) => {
  console.log(err);
});
  console.log('new image path is: ' + newImage);
},
error => {
  console.error('Error cropping image', error);
}
);
// this.myImage = 'data:image/jpeg;base64,' + imageData;
});
}   

Dann jetzt in der Ansicht home.html unten Dinge

    <button ion-button full (click)="selectImage()" 
 *ngIf="!base64Image">Gallery</button>
    <button ion-button full (click)="selectImageFromCamera()">Camera</button>
    <ion-row *ngIf="croppedImage">
       <ion-card>
          <ion-card-header>Cropped Image</ion-card-header>
          <ion-card-content padding>
             <img [src]="croppedImage">
          </ion-card-content>
       </ion-card>
    </ion-row>`enter code here`

InformationsquelleAutor Alok Singh