Access local images with Ionic Native on iOS


I am using ionic 2 native ImagePicker plugin

  maximumImagesCount: 1
}).then((results) => {
    vm.sourcePath = results[0]
    // 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


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)=> {
}, () => {

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

I asked the very same question on stackoverflow but I got no answer


Did you get any solution for this?