Problem showing an image when using cordova camera plugin in Android

cordova
1

Hello

I have tried to use the cordova camera plugin and the file plugin to store an image and also display it in a view. I was able to select an image from the gallery and also copy it to the data directory of the application but when I tried to display it on the screen it shows a broken link with a question mark (?).

**The tests for the app were done on a real device in an Android phone Samsung Galaxy S3. I have the latest ionic version, the latest cordova version and everything is up to date.

Let me explain the process that I followed:

I have used the following options for the camera plugin
destinationType: Camera.DestinationType.FILE_URI
source: Camera.PictureSourceType.PHOTOLIBRARY
encodingType: Camera.EncodingType.JPEG,

The imageURL returned from the getPicture method of the camera plugin has the following format:
content://media/external/images/media/1380

I have used the FilePath plugin and the method resolveNativePath to convert the url from content://media/external/images/media/1380 to something like the following format file:///data/data/com.ionicframework.testfileplugin146933/files/. If you don’t do this kind of conversion you are not able to copy the file to the data directory of the application. After copying the file and store it in local storage I am trying to display it by passing in the ng-source the URL with the format : file:///data/data/com.ionicframework.testfileplugin146933/files/image.jpeg
and at this point I am getting a broken lonk with a question mark on the screen.

In my module I have also added the configuration for the whitelist

.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.imgSrcSanitizationWhitelist(/^\s(https|file|blob|cdvfile|content):|data:image\//);
}
])

but I was not able to display the image.

I have also red similar posts from other users about this topic but non of these seems to give a clear explanation. This is the reason I am posting again a similar topic just in case something new was found

2

Hi, I have the same problem, and I can’t find noews about this. I think it’s impossible that anyone in the world had a similar problem!! Do you have some updates about this mess ???

Massimo

3

Hi Massimo… no at the moment I did not find any workaround. If I do I will let you know

4

Hello

I have managed to make it work with the help of this guy (leob) from the community forum of Ionic.I have uploaded a github repository with the working code. It has lots of console.log statements because I was trying to figure out what was going on and find a solution so if you download the code and want to have a check on it you can remove the log statements to make it more clear. The code is based on the article The Complete Guide To Images With Ionic (http://devdactic.com/complete-image-guide-ionic/) in case you want to have more explanation about the code.
Anyway what made the code work was the addition of a meta tag that allowed file URLs to render images on the view. You can check this : How to create custom camera plugin?

Again special thanks to leob for his valuable help, for his time and for his tips on the topic.

Github Repository: https://github.com/akarayiannis/devdactic-images/