【问题标题】：How to display a camera image in an img tag with cordova when using wkwebview使用wkwebview时如何在带有cordova的img标签中显示相机图像
【发布时间】：2020-10-01 17:04:17
【问题描述】：

该应用程序使用 cordova-ios 版本 6.0.0 。所以所有的 WkWebView 代码。

当用户使用cordova-plugin-camera插件选择图片，并且我将返回的图片uri设置为img标签的src时，会触发错误，因为uri以file://开头：

不允许加载本地资源：file:///xxx/xxx/xxx/xxx.jpg

如何使用 wkwebview 和在 cordova-ios 版本 6 中显示所选图像？

编辑：我已经尝试了无数的事情，但无法做到这一点。我正在使用 WkURLSchemeHandler，我将 config.xml 中的首选项设置为 app 和 localhost，如建议的 here:

<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

我看到相机插件返回的file:// url存储在tmp文件夹中。所以我尝试使用 app://localhost 访问它，但出现 404 错误：

var pos = photoURI.indexOf('/tmp');
if(pos >=0){
    photoURI = 'app://localhost' + photoURI.substr(pos);
}

欢迎提出任何想法。

谢谢。

【问题讨论】：

标签： ios cordova wkwebview cordova-ios cordova-plugin-camera

【解决方案1】：

app://localhost 仅服务于 www 资产。

解决方案 1：

使用这个插件https://github.com/communico/cordova-httpd在应用内启动本地服务器

cordova.plugins.CorHttpd.startServer({
    'www_root': cordova.file.dataDirectory.replace( 'file://', '' ),
    'port': 8080,
    'localhost_only': false
}, function( url ){
    // eg. http://10.0.0.185:8080/
    // if localhost_only is true，then url is http://127.0.0.1:8080/
    console.log(url);
}, function( error ){
    console.log(error);
});

例如，如果一个文件路径看起来像： file:///data/user/0/com.pushsoft.aio5app/files/image/7c8f2985-01b3-4fd2-ad7b-f39812a920a2

你可以使用这个url来展示图片： http://127.0.0.1:8080/image/7c8f2985-01b3-4fd2-ad7b-f39812a920a2

解决方案 2：

file:///var/mobile/Containers/Data/Application/<UUID>/tmp/可以放图片，<img>只能通过'file://'协议显示该目录内的图片

【讨论】：