Access local images with Ionic 2 Native on iOS

Question

I am using ionic 2 native ImagePicker plugin

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
})

Now I am trying to access this image using image src attribute

<img [src]='sourcePath' />

or even hard coded the path

<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"

but that shows nothing.

knowing that

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

shows the path correctly!

I tried using ionic native File plugin to convert the image to 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')
})

but that throws an error

I have added these whitelisting rules in my config.xml

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

and still no luck

I though maybe the returned file path is not correct so I put it in my browser, and it showed the picked image as it should

so how can I access local images with ionic 2 on iOS(9.3)

Answer 1

A workaround for the solution as suggested by author in this link can be done as

With $cordovaFile.readAsDataUrl(„file:///...“, „myPic.png“) you can request the content of the file.

In the View <img src=“{{ imgSrc }}“ />

In controller

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

And in the config.xml

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

Next is your index.html file

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

From Cordova 4.0.0 for Android's update:

Whitelist functionality is revamped

• You will need to add the new cordova-plugin-whitelist plugin to continue using a whitelist

• Setting a Content-Security-Policy (CSP) is now supported and is the recommended way to whitelist (see details in plugin readme)

• Network requests are blocked by default without the plugin, so install this plugin even to allow all requests, and even if you are using CSP.

• This new whitelist is enhanced to be more secure and configurable, but the Legacy whitelist behaviour is still available via a separate plugin (not recommended).

Note: while not strictly part of this release, the latest default app created by cordova-cli will include this plugin by default.

Fill attribution goes to this thread and links and the authors in it mentioned above