CODEWITHSUNDEEP
javascripthtmlangularjsbase64
arun kumar
arun kumar

Reputation: 59

Not able to load base64 image

while loading my HTML page , I have an onload function written in AngularJS which will get a base64 string of an image file from the server and I stored this base64 string in $scope.product.image. when I try to display this base64 string , I am getting ERR_INVALID_URL error in console.

Error message looks like this : GET : data:image/jpg;base64,9j_4AAQSK.......... net: ERR_INVALID_URL

my HTML looks like this

<section ng-show="product.image">
            {{product.image}}  /* This actually displays the content of base64 string. This confirms that value is reaching properly*/
            <img ng-src="{{'data:image/jpg;base64,'+product.image}}"/>
</section>

my app.js looks like this

$scope.onload = function()
{
    $http({method:'GET', url:'rest/product/onLoad'})
    .success(function (response){
        $scope.product.image = response.image;

    });
};

I tried with <img data-ng-src="data:image/jpg;base64,{{product.image}}"> but no luck.

How to load a base64 string as image ?

Upvotes: 4

Views: 15375

Answers (3)

Punit Gajjar
Punit Gajjar

Reputation: 4987

Call image data thru a function like this:

<img data-ng-src="{{getImage(product.image)}}" />

in controller:

$scope.getImage = function(data){
    return 'data:image/jpeg;base64,' + data;
}

Upvotes: 1

envy
envy

Reputation: 1

try using as the below:

ng-src="data:image/jpg;base64,{{product.image}}"

Upvotes: -1

MMhunter
MMhunter

Reputation: 1441

The error u get means that the data url itself is not right.

Since your prefix is correct, there must be problems in the base64 string you get.

Try put the data url in browser's address bar and check if it works.

Upvotes: 1

Related Questions