不允许加载本地资源：ionic 3 android

Posted 2023-02-23

【中文标题】不允许加载本地资源：ionic 3 android

【英文标题】：Not allowed to load local resource: ionic 3 android

【发布时间】：2019-02-02 22:12:30

【问题描述】：

我正在使用 ionic 3 android build apk 并尝试从 file:///storage/emulated/0/data/io.ionic.vdeovalet/cache/image.jpeg

拍摄图片（来源类型） 尝试 // 为相机对话框创建选项 变量选项 = 质量：100， 目的地类型：this.camera.DestinationType.FILE_URI， encodingType：this.camera.EncodingType.JPEG， 源类型：源类型， ; 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); 让 currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?')); this.copyFileToLocalDir(correctPath, currentName, this.createFileName()); this.lastImage = 文件路径； ); 别的 var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1); var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1); this.copyFileToLocalDir(correctPath, currentName, this.createFileName()); ，（错误）=> this.presentToast('选择图片时出错'); ); 抓住 (e) 控制台.错误（e）；

错误：不允许加载本地资源android 6.0.1

【问题讨论】：

你好 Muneeb，你解决了吗？我这里也有同样的问题。

【参考方案1】：

无需降级，只需编写此代码即可。

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

【讨论】：

..这段代码写在哪里？你应该合理地解释你的代码。

私赢：any = window; //写在变量声明处。and this -> "this.win.Ionic.WebView.convertFileSrc(path);"在您获得路径的位置，例如“file:///storage/emulated/0/data/io.ionic.vdeovalet/cache/image.jpeg”或出现错误的位置。@Sayed

宣布获胜：任何对我有用的伎俩。这个答案必须被标记为正确的解决方案。

你太棒了。

【参考方案2】：

我有同样的问题，结果证明 新的 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 cordova-plugin-ionic-webview@1.2.1

3.清洁科尔多瓦

cordova clean android

【讨论】：

这和我遇到的一样。此外，代码推送似乎与这个 2.x 版本的 ionic-webview 中断。所以可能有一些正当的理由留在 1.2.1 上。 github.com/Microsoft/cordova-plugin-code-push/issues/451

谢谢，你拯救了我的一天

这么多“解决方案”，这是最后一个可行的。谢谢！

【参考方案3】：

当 Ionic 与 Capacitor 一起使用时，我们可以通过以下方式获取图像或其他资源在本机设备上的正确路径：

import  Capacitor  from '@capacitor/core';

Capacitor.convertFileSrc(filePath); 

https://ionicframework.com/docs/core-concepts/webview

【参考方案4】：

唯一对我有用的是convertFileSrc()

let win: any = window; let safeURL = win.Ionic.WebView.convertFileSrc(this.file.dataDirectory+'data/yourFile.png');

希望对你有帮助

【参考方案5】：

试试这个：

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 : Not allowed to load local resource : with webview 2.2.3 - Ionic CLI 4.3.1

【参考方案6】：

试试这个：

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

【参考方案7】：

将此行复制到您的 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，我只是在测试。

【参考方案8】：

我所要做的就是使用正确的 Imagepicker 选项，输出类型做到了：

  const options: ImagePickerOptions = 
    maximumImagesCount: 1,
    outputType: 1,
    quality: 50
  ;

【参考方案9】：

let win: any = window; // hack ionic/angular compilator
var myURL = win.Ionic.WebView.convertFileSrc(myURL);