web-dev-qa-db-ja.com

ローカルリソースの読み込みは許可されていません：ionic 3 android

私はionic 3 Android apkをビルドし、file：/// storage/emulated/0/data/io.ionic.vdeovalet/cache/image.jpeg

 
 
 
 takePicture（sourceType）{
 try {
 //カメラダイアログのオプションを作成
 var options = {
 quality：100、
 destinationType：this.camera.DestinationType.FILE_URI、
 encodingType：this.camera.EncodingType.JPEG、
 sourceType： sourceType、
}; 
 this.camera.getPicture（options）.then（（imagePath）=> {
 // 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（ '？'））; 
 this.copyFileToLocalDir（correctPath、currentName、this.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.createFileName（））; 
} 
}、（err）=> {
 this.presentToast（ '画像選択中のエラー'）; 
}）; 
 
 
} catch（e）{
 console.error （e）; 
} 
 
 
}

エラー：ローカルリソースのロードが許可されていません
Android 6.0.1

androidfilepathionic3android-6.0-marshmallow
10
Muneeb Khan

同じ問題があり、新しいionic webviewプラグインが問題の原因であることが判明しました。

新しいプラグイン：cordova-plugin-ionic-webview @ 2.x不安定に思われる...

動作するようにするには、cordova-plugin-ionic-webview @ 1.2.1にダウングレードし、すべてが動作するはずです

手順：

1。 webviewのアンインストール

ionic cordova plugins rm cordova-plugin-ionic-webview

2。古いものをインストールする：

ionic cordova plugins add [email protected]

。きれいなコルドバ

cordova clean Android
15
Awesome Jim

このコードを書くだけでダウングレードする必要はありません。

private win: any = window;
    this.win.Ionic.WebView.convertFileSrc(path);
4
kunal shaktawat

これを試して：

1） https://devdactic.com/ionic-2-images/ このチュートリアルでは、ionic 2＆ionic 3は、画像をアップロードおよびアップロードする最良の方法です。

2） https://devdactic.com/ionic-4-image-upload-storage/ このチュートリアルでは、ionic 4画像をアップロードおよびアップロードする最良の方法です。

私もこれらを使用しています...それはうまく機能しています...

そして、私も問題に直面しました

ローカルリソースの読み込みが許可されていません

ここで見ることができます： @ ionic/angular 4.0.0-beta.13：ローカルリソースのロードが許可されていません：webview 2.2.3で-Ionic CLI 4.3.1

1
Ashish Patidar

これを試して：

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

この行を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;" />

次に、この関数の代わりにこの関数を記述します。このスクリプトが行うことは、写真を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");
    });
}

コンテンツCSP（コンテンツセキュリティポリシー）の問題のように見えます。メタタグでこの問題を修正する必要があります。コードは写真をbase64として読み取り、次にHTMLで表示します。

<img [src]="imageUrl">

そして、関数を変更して不要なconsole.logを削除することができます。ただテストしていました。

0
Mohamed Wahshey

私がしなければならなかったのは、適切なImagepickerオプションを使用することだけで、出力タイプはそれを行いました。

  const options: ImagePickerOptions = {
    maximumImagesCount: 1,
    outputType: 1,
    quality: 50
  };
0
Oscar Bout