How to display a local:// image in ionic framework + cordova?

Question

Does anyone know how to display local images, packaged inside a Cordova container, using Ionic (http://ionicframework.com/docs/)?

I am currently getting this error when the app runs on a device:

GET unsafe:local:///img/thumbs/myImage.jpg Unhandled Protocol

My Cordova app is built for BlackBerry 10 & Android using ionic framework. The app displays an image that is packaged inside the Cordova app itselfusing the following template:

<img ng-src="img/thumbs/{{img.path}}" ng-click="fooBar(img)"/>

Why is this error occurring?

Solution 1

I've discovered this is a current limitation of the ionic framework regarding BlackBerry 10 support. I've logged a bug here: http://github.com/driftyco/ionic/issues/1066

To fix this, I've since manually edited the ionic library to include support for the local protocol.

Solution 2

Angular issue

Replace following lines in ionic.bundle.js

var aHrefSanitizationWhitelist = /^\s*(https?|ftp|mailto|tel|file):/,
     imgSrcSanitizationWhitelist = /^\s*((https?|ftp|file|blob):|data:image\/)/;

to

var aHrefSanitizationWhitelist = /^\s*(https?|ftp|mailto|tel|file|local):/,
     imgSrcSanitizationWhitelist = /^\s*((https?|ftp|file|blob|local):|data:image\/)/;

Comments

[George Stocker]

Perhaps include that code? Without it, there's a question, but not solution.