web-dev-qa-db-fra.com

"Non autorisé à charger la ressource locale" pour l'image locale à partir de la page distante dans PhoneGap Build

J'héberge mes pages Web pour une application de construction phonegap. Je voudrais utiliser l'appareil photo pour télécharger une photo et afficher un aperçu de l'image, en procédant comme suit:

<img src="file:///storage/emulated/0/Android/data/com.myapp.myapp/cache/1470418568917.jpg" height="500" />

Comme mes pages sont hébergées, j'obtiens cette erreur:

Non autorisé à charger la ressource locale: file: ///storage/emulated/0/Android/data/com.myapp.myapp/cache/1470418568917.jpg ", source: https://www.myapp.com/v5 .5/imager.html #

Je suppose que c’est un problème CORS, j’ai donc ajouté cela au code HTML de la page

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

et ceci à mon config.xml (j'utilise Phonegap Build)

 <plugin name="cordova-plugin-whitelist" source="npm" />

 <allow-navigation href="*" />
 <allow-navigation href="*://*/*" />
 <allow-navigation href="file:///*/*" />
 <allow-navigation href="http://*/*" />
 <allow-navigation href="https://*/*" />
 <allow-navigation href="data:*" />

 <allow-intent href="*" />
 <allow-intent href="http://*/*" />
 <allow-intent href="https://*/*" />
 <allow-intent href="tel:*" />
 <allow-intent href="sms:*" />
 <allow-intent href="mailto:*" />
 <allow-intent href="geo:*" />

 <access Origin="*" />
 <access Origin="*://*/*" />
 <access Origin="file:///*" />
 <access Origin="cdvfile://*" />
 <access Origin="content:///*" />

Comme vous pouvez le constater, j’ai essayé tous les réglages possibles, depuis le nettoyage du Web . Est-ce que je manque quelque chose d’évident?

Merci d'avance.

imagecordovacorsphonegap-build
15
Nico Westerdale

OK a finalement eu une solution de contournement, qui consiste à convertir le fichier: /// URI en un cdvfile: // URI, que ma page se plaint uniquement est un avertissement de contenu mixte, et me permet d'y accéder!

function getFileEntry(imgUri) {
            window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) {
                console.log("got file: " + fileEntry.fullPath);
                console.log('cdvfile URI: ' + fileEntry.toInternalURL());
                $('#imgPreview').attr("src", fileEntry.toInternalURL());
            });
        }

Il serait toujours bon d'avoir un moyen correct d'accéder aux fichiers: /// URI, je peux voir les cas où cela ne fonctionnerait pas, mais pour ce que je fais, cela est résolu.

11
Nico Westerdale

Remarque à noter ici pour les futurs utilisateurs confrontés à ce problème, assurez-vous de ne PAS exécuter le mode 'Live Reload' lorsque vous testez une telle fonctionnalité. Live Reload entraînera ce même message d'erreur qui est clairement trompeur. Après la compilation sans live live, tout a fonctionné pour moi en utilisant le fichier:/OR cdv:/path.

11
Nicholas Kreidberg

J'ai récemment fait face au même problème. Apparaît que cordova ios app est exécutée sur localhost: 8080 en interne, c’est la raison principale pour laquelle elle ne permet pas de charger des fichiers à partir du protocole "fichier: //".

solution facile - "var workingPath = window.Ionic.normalizeURL (givenPath)";

Veuillez lire l’article de IONIC à ce sujet - https://ionicframework.com/docs/wkwebview/

7
Vladyslav Goloshchapov

Cela fonctionne avec ionic 3 et vous pouvez utiliser ci-dessous pour résoudre le problème pour Ne pas autoriser le chargement de ressources locales

Tout d'abord mettre ces choses dans home.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;
});
}

Puis maintenant dans la vue home.html mettre ci-dessous les choses

    <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`
1
Alok Singh

Ma solution supprimait cordova-plugin-ionic-webview de la liste des plugins

0
rashidnk

Je travaillais sur l'application ionic3 et testais la console à l'aide de chrome inspector. Je courais aussi et émulais avec le drapeau --livereload, il ne montrait pas d'image, ni sur l'émulateur, ni sur le périphérique réel . Je vais sur Lien mentionné ci-dessus et a importé le module 
import {normalizeURL} from 'ionic-angular'; 
sur le rappel de succès de ma fonction de capture d’image, j’ai passé le chemin comme ceci et cela a fonctionné comme un charme.
Après avoir étudié un peu plus, j'ai découvert que c'est à cause de --livereload Flag, j'ai supprimé le drapeau de la commande, lancez le programme avec la commande suivante et son image affichée maintenant:
ionic cordova sous 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();
  }
0
ImFarhad