How to display a local:// image in ionic framework

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?

Answer 1

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\/)/;

Answer 2

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.

Answer 3

I've just pull request to Angular, because it's an Angular limitation, not of the Ionic framework. You can see the pull-request here: https://github.com/angular/angular.js/pull/8787