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" ;, source：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实时重新加载后，一切正常：/或cdv：/ path。

Answer 3

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

简单修复 - ＆＃34; var workingPath = window.Ionic.normalizeURL（givenPath）＆＃34;;

请阅读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);（对于iOS）。

Android并不复杂，因此您可以使用window.open(url, '_self');

我的URL格式为（对于iOS）：file:///var/mobile/Containers/Data/Application/[UUID]/Library/NoCloud/[appFolder]/index.html

Answer 6

我正在使用ionic3应用程序并使用 chrome检查器测试控制台。我还在运行并使用 - livereload 标志进行模拟，它没有显示图像在模拟器上或在真实设备上。我转到Above mentioned link并从＆＃39; ionic-angular＆＃39 ;; 中导入模块 import {normalizeURL} 关于我的图像捕捉功能的成功回调，我通过了这样的路径，它就像一个魅力在稍微调查一下之后，我发现它是因为 - livereload Flag ，我从命令中删除了标志，使用以下命令运行程序并立即显示图像：
离子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 7

我的解决方案是从插件列表中删除cordova-plugin-ionic-webview

Answer 8

这是唯一对我有用的东西： window ['Ionic'] ['WebView']。convertFileSrc（yourURL）;

Answer 9

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

在 .html 中

std

在 .ts 中

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

＆＃34;不允许加载本地资源＆＃34;从PhoneGap Build中的远程页面获取本地映像

9 个答案: