PhoneGap Build中远程页面的本地图像“不允许加载本地资源”

Question

我正在为 phonegap 构建应用托管我的网页。 我想用相机上传照片，并显示预览图像，基本上是这样做的：

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

因为我的页面是托管的，所以我收到了这个错误：

不允许加载本地资源：file:///storage/emulated/0/Android/data/com.myapp.myapp/cache/1470418568917.jpg”，来源：https://www.myapp.com/v5.5/imager.html#

我认为这是一些 CORS 问题，所以我已将其添加到页面的 html 中

<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:">

这是我的 config.xml（我正在使用 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:///*" />

如您所见，我已经尝试了所有我能想到的设置，包括搜索网络。 我错过了什么明显的东西吗？

提前致谢。

Answer 1

好的，终于找到了一个解决方法，即将 file:/// URI 转换为 cdvfile:// URI，我的页面只抱怨是混合内容警告，并且允许我访问！

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

如果有一个正确的方法来访问 file:/// URI 还是很高兴的，我可以看到这不起作用的情况，但是对于我正在做的事情，这已经解决了。

Answer 2

对于遇到此问题的未来用户，请注意此处，请确保您在测试此类功能时未在“实时重新加载”模式下运行。 Live Reload 将导致同样的错误消息，这显然具有误导性。在构建 w/o live reload 之后，使用 file:/ OR cdv:/ path 对我来说一切正常。

Answer 3

我最近遇到了同样的问题。似乎cordova ios应用程序在localhost：8080内部运行，这是它不允许从“file：//”协议加载文件的主要原因。

简单修复 - “var workingPath = window.Ionic.normalizeURL(givenPath)”;

请阅读 IONIC 的文章 - https://ionicframework.com/docs/wkwebview/

Answer 4

这适用于 ionic 3，您可以使用下面的方法解决不允许加载本地资源的问题

先把这些东西放到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;
});
}   

然后现在在视图 home.html 中放下面的东西

    <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`

Answer 5

@Vladyslav Goloshchapov 的答案对我的情况是正确的（使用不推荐的形式）。

我正在尝试使用 phonegap-plugin-contentsync 从 Ionic 应用程序（两个 Ionic 4）中打开一个 Ionic 应用程序，它允许您下载文件（在我的情况下是一个 Ionic 应用程序）并将其解压缩到本地文件系统中。 （第二个应用不是已发布的应用）。

我将其用作：window.location.href = window.Ionic.WebView.convertFileSrc(url); for iOS。

Android没有那么复杂，所以你可以使用window.open(url, '_self');

我的 URL 采用以下格式（适用于 iOS）：file:///var/mobile/Containers/Data/Application/[UUID]/Library/NoCloud/[appFolder]/index.html

Answer 6

Ionic 4-5 用户请注意。 Webview 不允许从存储中读取。通过使用方法，图像被加载为本地主机资源。从设备获取只是 url 被操纵。

在.html中

<img [src]="getTrustImg(imageSrc)" />

在.ts中

private win: any = window;

getTrustImg(imageSrc){
let path = this.win.Ionic.WebView.convertFileSrc(imageSrc);
console.log(path);
return path;
}

Answer 7

Google 似乎将该文件位置列为不安全。从科尔多瓦 10 起，它被标记为如此。您仍然可以在 config.xml 中将此首选项与它一起使用

<preference name="AndroidInsecureFileModeEnabled" value="true" />

这里有更多信息：https://cordova.apache.org/announcements/2021/07/20/cordova-android-10.0.0.html

Answer 8

我正在开发 ionic3 应用程序并使用 chrome 检查器测试控制台。 我还使用 --livereload 标志运行和模拟，它没有显示图像在模拟器或真实设备上。 我去Above mentioned link 并导入了模块
import { normalizeURL } from 'ionic-angular';
在我的图像捕获函数的成功回调中，我通过了这样的路径，它就像一个魅力。
经过一番调查，我发现它是因为 --livereload Flag，我从 command 中删除了该标志，现在使用以下命令运行程序及其显示图像：
ionic cordova 运行 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();
  }

Answer 9

这是唯一对我有用的东西： window['Ionic']['WebView'].convertFileSrc(yourURL);