BASE64 + ng-style, not working


#1

Hi,

I’m trying to place an image encoded in base64 on a div using ng-style, but the image is not showing. I searched in google and couldn’t find an answer, maybe someone here have had the same problem before.

This is my non working code code.

<div class="blurry" ng-style="{ 'background-image': 'url(data:image/png;base64,{{user.avatar}})' }"></div>

user.avatar contains an image encoded in base64. I’m using the same approach on an image tag an it works, so that’s why I’m wondering why the one I posted above doesn’t.

<img ng-src="data:image/png;base64,{{user.avatar}}" alt="Carlitos Navas" width="100" class="avatar">

#2

Hi @ro_puente ,

try by populating CSS in controller and assign using ng-stype like below.

<body ng-app="myApp" ng-controller="myCtrl">

<div  ng-style="myStyle"></div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.myStyle = {
        "background-image" : "url(data:image/png;base64," + user.avatar + ")" 
    }
});
</script>
</body>