"Not allowed to load local resource" 对于 PhoneGap Build 中来自远程页面的本地图像
"Not allowed to load local resource" for Local image from Remote page in PhoneGap Build
我正在为 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:///*" />
如您所见，我已经尝试了所有我能想到的设置，从网上搜索。
我是否遗漏了一些明显的东西？
提前致谢。
OK 终于有了一个解决方法，就是将 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 仍然很好，我可以看到这不起作用的情况，但对于我正在做的事情，这个问题已经解决了。
对于 运行 使用此功能的未来用户，这里需要注意一些事项，请确保您在测试此类功能时没有 运行 进入 'Live Reload' 模式。 Live Reload 将导致同样的错误消息，这显然具有误导性。在构建 w/o 实时重新加载后，使用文件：/ 或 cdv：/ 路径对我来说一切正常。
我最近遇到了同样的问题。似乎 cordova ios 应用程序在 localhost:8080 内部是 运行，这是它不允许从 "file://" 协议加载文件的主要原因。
轻松修复 - "var workingPath = window.Ionic.normalizeURL(givenPath)";
请阅读 IONIC 的相关文章 - https://ionicframework.com/docs/wkwebview/
我正在开发 ionic3 应用程序并使用 chrome 检查器测试控制台。 我也在 运行ning 并使用 --livereload 标志，它既不在模拟器上也不在真实设备上显示图像。
我转到 Above mentioned link 并从 'ionic-angular';
导入模块
import { normalizeURL }
在我的图像捕获功能的成功回调中，我通过了这样的路径并且它非常有效。
在进一步调查之后，我发现是因为 --livereload Flag，我从 command 中删除了标志，运行 带有以下命令的程序及其显示现在的图像：
离子科尔多瓦 运行 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();
}
这适用于 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`
@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
这是唯一对我有用的东西：
window['Ionic']['WebView'].convertFileSrc(yourURL);
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;
}
Android
看起来 Google 将文件位置列为不安全。从 cordova 10 开始，它被标记为这样。您仍然可以在 config.xml
中使用此首选项
<preference name="AndroidInsecureFileModeEnabled" value="true" />
这里有更多信息：https://cordova.apache.org/announcements/2021/07/20/cordova-android-10.0.0.html
iOS
在 iOS 使用方案路径解决了我的问题：
window.WkWebView.convertFilePath(cordova.file.dataDirectory + path)
您必须在您的 config.xml 中添加此首选项才能正常工作：
<preference name="scheme" value="app" />
Android
随着 cordova-plugin-file 7.0.0 的发布，我们现在可以使用 Entry.toURL() 获取文件的本地主机路径，如下所示
window.resolveLocalFileSystemURL(path, function (fileEntry) {
image.src = fileEntry.toURL();
});
这样就不需要 AndroidInsecureFileModeEnabled 首选项
IOS
要为 iOS 添加到 ，如果您使用 AngularJS 并且收到类似
的错误
Refused to load unsafe:app://...
您需要将您的方案（应用程序）添加到 AngularJS 的白名单中才能加载图片。这可以使用
来完成
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|app):|data:image//);
我正在为 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:///*" />
如您所见，我已经尝试了所有我能想到的设置，从网上搜索。 我是否遗漏了一些明显的东西？
提前致谢。
OK 终于有了一个解决方法，就是将 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 仍然很好，我可以看到这不起作用的情况，但对于我正在做的事情，这个问题已经解决了。
对于 运行 使用此功能的未来用户，这里需要注意一些事项，请确保您在测试此类功能时没有 运行 进入 'Live Reload' 模式。 Live Reload 将导致同样的错误消息，这显然具有误导性。在构建 w/o 实时重新加载后，使用文件：/ 或 cdv：/ 路径对我来说一切正常。
我最近遇到了同样的问题。似乎 cordova ios 应用程序在 localhost:8080 内部是 运行，这是它不允许从 "file://" 协议加载文件的主要原因。
轻松修复 - "var workingPath = window.Ionic.normalizeURL(givenPath)";
请阅读 IONIC 的相关文章 - https://ionicframework.com/docs/wkwebview/
我正在开发 ionic3 应用程序并使用 chrome 检查器测试控制台。 我也在 运行ning 并使用 --livereload 标志，它既不在模拟器上也不在真实设备上显示图像。
我转到 Above mentioned link 并从 'ionic-angular';
导入模块
import { normalizeURL }
在我的图像捕获功能的成功回调中，我通过了这样的路径并且它非常有效。
在进一步调查之后，我发现是因为 --livereload Flag，我从 command 中删除了标志，运行 带有以下命令的程序及其显示现在的图像：
离子科尔多瓦 运行 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();
}
这适用于 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`
@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
这是唯一对我有用的东西： window['Ionic']['WebView'].convertFileSrc(yourURL);
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;
}
Android
看起来 Google 将文件位置列为不安全。从 cordova 10 开始，它被标记为这样。您仍然可以在 config.xml
中使用此首选项<preference name="AndroidInsecureFileModeEnabled" value="true" />
这里有更多信息：https://cordova.apache.org/announcements/2021/07/20/cordova-android-10.0.0.html
iOS
在 iOS 使用方案路径解决了我的问题：
window.WkWebView.convertFilePath(cordova.file.dataDirectory + path)
您必须在您的 config.xml 中添加此首选项才能正常工作：
<preference name="scheme" value="app" />
Android
随着 cordova-plugin-file 7.0.0 的发布，我们现在可以使用 Entry.toURL() 获取文件的本地主机路径，如下所示
window.resolveLocalFileSystemURL(path, function (fileEntry) {
image.src = fileEntry.toURL();
});
这样就不需要 AndroidInsecureFileModeEnabled 首选项
IOS
要为 iOS 添加到
Refused to load unsafe:app://...
您需要将您的方案（应用程序）添加到 AngularJS 的白名单中才能加载图片。这可以使用
来完成$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|app):|data:image//);