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?
I've discovered this is a current limitation of the ionic framework regarding BlackBerry 10 support. I've logged a bug here: github.com/driftyco/ionic/issues/1066
To fix this, I've since manually edited the ionic library to include support for the local protocol.
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
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/)/;