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

Question

我正在使用ionic 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
})

现在我正在尝试使用图像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>

正确显示路径！

我尝试使用ionic原生文件插件将图像转换为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（9.3）上如何使用Ionic 2访问本地图像呢？

- Evan Lévesque

Answer 1

在这个链接中，作者提出的解决方案的一个变通方法如下：

使用 $cordovaFile.readAsDataUrl("file:///...", "myPic.png") 可以请求文件的内容。

在 View 中：<img src="{{ imgSrc }}" />

在 controller 中：

$cordovaFile.readAsDataUrl(„file:///...“, „myPic.png“).then(
function(res) { $scope.imgSrc = res; },
function(error) { alert(damn!‘); }
);

在 config.xml 中

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

下面是您的index.html文件。

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

从 Cordova 4.0.0 的 Android 更新中：

白名单功能得到改进

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

• 现在支持设置内容安全策略（CSP），这是建议使用的白名单方式（请参阅插件自述文件中的详细信息）

• 没有此插件，网络请求将默认被阻止。因此，即使您使用 CSP，也应安装此插件以允许所有请求。

• 这个新的白名单功能更加安全和可配置，但是旧版白名单的行为仍然可以通过一个单独的插件获得（不建议使用）。

注意：尽管不是严格意义上的发布内容，但由 cordova-cli 创建的最新默认应用程序将默认包含此插件。

原文链接 thread，作者和链接如上所述。

- Pritish Vaidya