Image URIs from Camera plugin and live reload

ionic-v1
1

While working on a rather simple app today I ran into an odd issue that I think is due to using live reload in the CLI. My demo simply used the Camera plugin to display the picture in the dom. My initial code was using an array and a list, and when things started to fail, I went to something super simple to try to figure out why it was failing:

	var image = document.getElementById('myImage');
	image.src = imageUri;

While remote debugging, I got: Not allowed to load local resource:

That didn’t quite make sense to me. I’ve used fileUris in camera demos many times before. I even tried copying my own super simple demo from here, https://github.com/cfjedimaster/Cordova-Examples/tree/master/basic_camera, and that failed too!

Then on a whim I tried something. I had been using: ionic emulate ios (and android) -l -c. I tried cordova emulate ios and it worked! I then tried ionic emulate ios and it worked too.

So the issue seems to be live reload (or maybe console logging) that is breaking the ability to use file URIs for images in the dom.

3 Likes
2

Just to be clear, the issue is in both iOS and Android. If I had to guess, I’d say file:/// is referring to my desktop and not the device when using live reload, which means any work using the File system would also fail. (And file transfers.)

3

Yep - even the PhoneGap Developer app fails with this. :\

4

So based on other things I’m seeing, I think this is a known issue, with no real way around it. I think - however - that it is important enough for the CLI to possibly add a quick warning when you fire up the process. Going to file an ER for that now.

5

Have you tried to use imgSrcSanitizationWhitelist?

See example in my book https://github.com/innovieco/ionic-ebook/blob/master/instaclone/www/js/app.js

6

Yep I did and it didn’t help. It is live reload - plain and simple.

7

Just ran across the same problem. It’s because livereload serves index.html from your dev machine, instead of locally from the app.

Error from logcat looks like:

http://10.0.1.165:8100/#/app/snap: Line 0 : Not allowed to load local resource: file:///storage/emulated/0/Android/data/com.my.snap/cache/1427018827228.jpg

Can’t think of a nice solution; guess we’ll just have to test that stuff running non-livereload.

3 Likes
8

Had the same issue with the PayPal plugin. A dirty trick that worked was to copy .js file I needed from plugins/com.paypal.cordova.mobilesdk/www/js/paypal-mobile-js-helper.js to the js folder.

9

With the current version of the Camera plugin, setting the destinationType as NATIVE_URI fixed the problem for me (it defaults to FILE_URI). So your options would look something like this:

options = { quality : 100, sourceType : Camera.PictureSourceType.CAMERA, destinationType : Camera.DestinationType.NATIVE_URI };

1 Like
10

NATIVE_URI does not solve the problem with live reload. Only DATA_URL can be used but memory consumption may be cause of app crashes and out of memory errors:

DATA_URL number 0 Return base64 encoded string. DATA_URL can be very memory intensive and cause app crashes or out of memory errors. Use FILE_URI or NATIVE_URI if possible

11

I face the same issue. Have to test the app without live-reload :frowning: