This morning I ran into an odd issue with what should have been relatively simple code. I'm working on a set of demos using Ionic and Cordova that demonstrate a particular use case of the camera. While testing, I noticed that I couldn't see an image I had selected from the gallery.

At first, I thought it was the Angular issue (ok, they call it a feature, and I get the reasoning, but I call it a bug and I'm happy to be wrong) where the library will block you from injecting potentially dangerous stuff into the DOM. The fix for that is rather simple - just add a regex to imgSrcSanitizationWhitelist:

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|content|file|assets-library):/);

However, that didn't work. I had been testing with iOS so I quickly switched to Android and tested there. I noticed I had the same issue.

At this point I hit a brick wall. I've used the Camera numerous times before with Cordova so I assumed it must have been an Angular issue. I then tried my basic camera demo from my Cordova examples repository - an app I had built a while ago and was as simple as possible - and that failed too!

While testing, I was debugging of course, and I noticed this error in the console: Not allowed to load local resource. This is what had originally reminded me to use the sanitization setting in Angular, but I was seeing it in my non-Angular example as well.

I then did one more test. I had been using Ionic's kick ass live reload feature while testing. On a whim, I stopped, and switched to just doing cordova emulate ios... and it worked. I then realized what the culprit was - live reload.

When using live reload, you're actually running the assets off the computer and not the device. That means the URIs returned by the camera plugin were referencing URIs on the computer that did not exist.

To confirm this was an issue, I also tested with the PhoneGap Developer App and I had the exact same problem. This makes sense, but is definitely a bit of a bummer if you need to test anything involving the file system. In my particular use case, I could switch to using base64 images, but I'm going to avoid that as it isn't typically recommended.

To be clear, I'm not suggesting to avoid these features. Ionic's Live Reload is freaking helpful as hell, and the PhoneGap Developer App is the number one way to test PhoneGap/Cordova quickly (and will be what I use in presentations in the future), but you want to remember these issues when testing. I opened an ER for the Ionic CLI to warn users about this and I'd appreciate folks input (either for or against) if you are an Ionic user.