在iOS上使用Ionic 2 Native访问本地图像

Question

我正在使用离子2本机ImagePicker插件

ImagePicker.getPictures({
  maximumImagesCount: 1
}).then((results) => {
    vm.sourcePath = results[0]
    console.log(vm.sourcePath)
    // file:///Users/aymanjitan/Library/Developer/CoreSimulator/Devices/E937952F-7FAA-4DBB-8E23-80B04F3B6C72/data/Containers/Data/Application/FCF9097F-67BD-4DAD-AE30-D2F1839C0374/tmp/cdv_photo_003.jpg
})

现在我尝试使用image src属性访问此图像

<img [src]='sourcePath' />

甚至硬编码路径

<img src="file:///Users/aymanjitan/Library/Developer/CoreSimulator/Devices/E937952F-7FAA-4DBB-8E23-80B04F3B6C72/data/Containers/Data/Application/FCF9097F-67BD-4DAD-AE30-D2F1839C0374/tmp/cdv_photo_003.jpg"

但这没有任何表现.

知道

<apan>{{sourcePath}}</apan>

正确显示路径!

我尝试使用离子原生文件插件将图像转换为base64

var sourceDirectory = vm.sourcePath.substring(0, vm.sourcePath.lastIndexOf('/') + 1);
var sourceFileName = vm.sourcePath.substring(vm.sourcePath.lastIndexOf('/') + 1, vm.sourcePath.length);
File.readAsArrayBuffer(sourceDirectory, sourceFileName).then((fileData)=> {
  console.log(fileData)
}, () => {
  console.log('error')
})

但是这会引发错误

我在config.xml中添加了这些白名单规则

<access origin="*"/>
<allow-navigation href="*"/>
<allow-navigation href="file://*/*"/>

但仍然没有运气

我虽然可能返回的文件路径不正确所以我把它放在我的浏览器中,它显示了应该选择的图像

那么如何在iOS上使用ionic 2访问本地图像(9.3)

Answer 1

作者在此链接中建议的解决方案的解决方法可以如下完成

\n

您$cordovaFile.readAsDataUrl(\xe2\x80\x9efile:///...\xe2\x80\x9c, \xe2\x80\x9emyPic.png\xe2\x80\x9c)可以请求文件的内容。

\n

在View\n<img src=\xe2\x80\x9c{{ imgSrc }}\xe2\x80\x9c />

\n

在controller

\n

$cordovaFile.readAsDataUrl(\xe2\x80\x9efile:///...\xe2\x80\x9c, \xe2\x80\x9emyPic.png\xe2\x80\x9c).then(\nfunction(res) { $scope.imgSrc = res; },\nfunction(error) { alert(damn!\xe2\x80\x98); }\n);\n

\n

并且在config.xml

\n

<allow-navigation href="*"/>\n<allow-navigation href="file://*/*" />\n<allow-intent href="*"/>\n<access origin="*"/>\n

\n

接下来是你的index.html文件

\n

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src \'self\' \'unsafe-inline\'; script-src \'self\' \'unsafe-inline\' \'unsafe-eval\'">\n

\n

从 Cordova 4.0.0 for Android 的更新开始：

\n

\n

白名单功能已改进

\n

\n

• 您将需要添加新的 cordova-plugin-whitelist 插件才能继续使用白名单

  \n
\n

• 现在支持设置内容安全策略（CSP），并且是推荐的白名单方法（请参阅插件自述文件中的详细信息）

  \n
\n

• 如果没有该插件，网络请求默认会被阻止，因此即使您使用的是 CSP，也可以安装此插件以允许所有请求。

  \n
\n

• 这个新的白名单经过增强，更加安全和可配置，但旧版白名单行为仍然可以通过单独的插件使用（不推荐）。

  \n
\n

\n

\n

注意：虽然严格来说不是此版本的一部分，但 cordova-cli 创建的最新默认应用程序将默认包含此插件。

\n

填写归属地到此线程和链接以及上面提到的作者

\n