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

【问题标题】：Access local images with Ionic 2 Native on iOS在 iOS 上使用 Ionic 2 Native 访问本地图像
【发布时间】：2017-02-26 01:38:01
【问题描述】：

我正在使用 ionic 2 native 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>

正确显示路径！

我尝试使用离子原生 File plugin 将图像转换为 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 访问本地图像

【问题讨论】：

标签： ios ionic-framework cordova-plugins ionic2 ngcordova

【解决方案1】：

author 在此link 中建议的解决方案的解决方法可以是

使用$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 for Android 的更新：

改进了白名单功能

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

现在支持设置 Content-Security-Policy (CSP)，并且是推荐的白名单方式（请参阅插件自述文件中的详细信息）

网络请求在没有插件的情况下默认被阻止，所以安装这个插件甚至允许所有请求，即使你正在使用 CSP。

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

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

填写归属于这个thread 以及上面提到的链接和其中的作者

【讨论】：