I am trying to simply display a base64 image in an Ionic app.
The image won't display if I do this:
HTML:
<img ng-src="data:image/jpeg;base64,{{myImage}}"/>
Controller:
$scope.myImage= "/9j/4AAQSkZJ ...";
But the image WILL display if I just put the encoded string directly in the image element like this:
<img ng-src="data:image/jpeg;base64,/9j/4AAQSkZJ ..."/>
I have checked every unsafe security setting, looked at dozens of other SO posts, etc. If I put this small example in a CodePen, it works both ways.
What could be happening to the $scope.myImage variable that would prevent it from binding to the image element? Is it an ionic thing? An angular issue?
Sometimes I too face the issue, and use setTimeout or $timeout.
setTimeout(function(){
$scope.myImage= "/9j/4AAQSkZJ ...";
}, 2000);
In Angular way (add $timeout DI in controller)-
$timeout(function(){
$scope.myImage= "/9j/4AAQSkZJ ...";
}, 2000);
Use data-ng-src directive like this <img data-ng-src="{{data.image_url}}">.
In your controller set base64 string as this:
$scope.data.image_url=<your base64 image source>
Hope this helps!
i had the same issue, solved it by configuring the main angular module with whitelisting this way:
angular.module('app').config(function ($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https|ftp|mailto|file|tel|data)/);})