web-dev-qa-db-fra.com

Non autorisé à charger la ressource locale: ionic 3 android

J'utilise ionic 3 Android build apk et j'essaie de télécharger une image de fichier: ///storage/emulated/0/data/io.ionic.vdeovalet/cache/image.jpeg




 takePicture (sourceType) {
 essayez {
 // Créer des options pour la boîte de dialogue Caméra 
 var options = {
 qualité: 100, 
 destinationType: this.camera.DestinationType.FILE_URI, 
 encodingType: this.camera.EncodingType.JPEG, 
 sourceType: sourceType, 
 }; 
 this.camera.getPicture (options) .then ((imagePath) => {
 // Traitement spécial pour la bibliothèque Android 
 if (this.platform.is ('Android') && sourceType === 
 this.camera.PictureSourceType.PHOTOLIBRARY) {
 this.filePath.resolveNativePath (imagePath) 
then (filePath => {
 let correctPath = filePath.substr (0, filePath.lastIndexOf ('/') + 1); 
 Let currentName = imagePath.substring (imagePath.lastIndexOf ('/') + 1, 
 ImagePath.lastIndexOf ('?')); 
CopeFileToLocalDir (correct, chemin, chemin, etc. .createFileName ()); 
 this.lastImage = filePath; 
}); 
} else {
 var currentName = imagePath.substr (imagePath.lastIndexOf ('/') + 1) ;
 var correctPath = imagePath.substr (0, imagePath.lastIndexOf ('/') + 1); 
 this.copyFileToLocalDir (correctPath, currentName, this.crea teFileName ()); 
 } 
 }, (err) => {
 this.presentToast ('Erreur lors de la sélection de l'image.'); 
 }); 


 } catch (e) {
 console.error (e); 
 } 


 }

Erreur: non autorisé à charger la ressource locale
Android 6.0.1

androidfilepathionic3android-6.0-marshmallow
8
Muneeb Khan

J'ai eu les mêmes problèmes et il s'avère que Le nouveau plugin ionic webview est la cause du problème.

Le nouveau plugin: cordova-plugin-ionic-webview @ 2.x semble instable ...

pour qu'il fonctionne de nouveau à [email protected] et tout devrait fonctionner

Pas:

1. désinstaller webview

ionic cordova plugins rm cordova-plugin-ionic-webview

2. installez l'ancien:

ionic cordova plugins add [email protected]

3. nettoyer cordova

cordova clean Android
12
Awesome Jim

Essaye ça:

1) https://devdactic.com/ionic-2-images/ Dans ce tutoriel, ionic 2 & ionic 3 est le meilleur moyen de télécharger des images.

2) https://devdactic.com/ionic-4-image-upload-storage/ Dans ce tutoriel, ionic 4 est le meilleur moyen de télécharger des images.

j'utilise aussi ces ... et ça fonctionne bien ...

Et j'ai aussi fait face au problème de

pas autorisé à charger la ressource locale

Vous pouvez voir ici: @ ionic/angular 4.0.0-beta.13: Il est interdit de charger une ressource locale: avec webview 2.2.3 - Ionic CLI 4.3.1

1
Ashish Patidar

Essaye ça:

const options: CameraOptions = {
    quality: 10
    , destinationType: this.camera.DestinationType.DATA_URL
    , mediaType: this.camera.MediaType.PICTURE
    // Optional , correctOrientation: true
    , sourceType: sourceType == 0 ? this.camera.PictureSourceType.CAMERA : this.camera.PictureSourceType.PHOTOLIBRARY
    // Optional , saveToPhotoAlbum: true
};

this.camera.getPicture(options).then(imageBase64 => {
    let txtForImage = `data:image/jpeg;base64,` + imageBase64;
    this.imageToLoad = txtForImage;
})
.catch(error => {
    alert("Error: " + error);
    console.error(error);
});
0
Koken

Copiez cette ligne dans votre index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; 
style-src 'self' 'unsafe-inline'; 
script-src 'self' 'unsafe-inline' 'unsafe-eval';
img-src 'self' data: https://s-media-cache-ak0.pinimg.com;
script-src 'self' https://maps.googleapis.com;" />

Ensuite, écrivez cette fonction à la place de la vôtre, notez que le script renvoie la photo au format base64.

getImageFromCamera() {
const options: CameraOptions = {
    quality: 20,
    saveToPhotoAlbum: true,
    destinationType: this.camera.DestinationType.FILE_URI,
    sourceType: this.camera.PictureSourceType.CAMERA,
    encodingType: this.camera.EncodingType.JPEG,
    allowEdit: false
};
this.camera.getPicture(options).then((imageData) => {
    this.imageURI = imageData;
    this.imageName = imageData.substr(imageData.lastIndexOf('/') + 1);
    // Create a folder in memory location
    this.file.checkDir(this.file.externalRootDirectory, 'Demo')
        .then(() => {
            this.fileCreated = true;
        }, (err) => {
            console.log("checkDir: Error");
            this.presentToast("checkDir Failed");
        });
    if (this.fileCreated) {
        this.presentToast("Directory Already exist");
    }
    else {
        this.file.createDir(this.file.externalRootDirectory, "Demo", true)
            .then((res) => {
                this.presentToast("Directory Created");
            }, (err) => {
                console.log("Directory Creation Error:");
            });
    }

    //FILE MOVE CODE
    let tempPath = this.imageURI.substr(0, this.imageURI.lastIndexOf('/') + 1);
    let androidPath = this.file.externalRootDirectory + '/Bexel/';
    this.imageString = androidPath + this.imageName;

    this.file.moveFile(tempPath, this.imageName, androidPath, this.imageName)
        .then((res) => {
            this.presentToast("Image Saved Successfully");
            this.readImage(this.imageString);

        }, (err) => {
            console.log("Image Copy Failed");
            this.presentToast("Image Copy Failed");
        });
    //Complete File Move Code

    this.toDataURL(this.imageURI, function (dataUrl) {
        console.log('RESULT:' + dataUrl);
    });
  }, (err) => {
    console.log(JSON.stringify(err));
    this.presentToast(JSON.stringify(err));
  });
}
presentToast(msg) {
let toast = this.toastCtrl.create({
    message: msg,
    duration: 2000
});
toast.present();
}
toDataURL(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
    let reader = new FileReader();
    reader.onloadend = function () {
        callback(reader.result);
    };
    reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
readImage(filePath) {
let tempPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
let imageName = filePath.substr(filePath.lastIndexOf('/') + 1);

this.file.readAsDataURL(tempPath, imageName)
    .then((res) => {
        this.presentToast("Image Get Done");
        this.imageUrl = res;
    }, (err) => {
        this.presentToast("Image Get Error");
    });
}

Il voit comme un problème avec le contenu CSP (politique de sécurité du contenu), la balise méta devrait résoudre ce problème, puis le code lirait la photo au format base64, puis voilà, en HTML:

<img [src]="imageUrl">

Et vous pouvez modifier la fonction pour supprimer le fichier console.log inutile, je venais de tester.

0
Mohamed Wahshey