image - "Not allowed to load local resource"来自 PhoneGap 构建中远程页面的本地镜像

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

安卓
看起来谷歌将文件位置列为不安全。从 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" />