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 ?

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 ?

• javascript
• html
• angularjs
• base64

• Cannot see any problems with your code. have u tried copy the ng-src value and put it in the browser address bar to check if the data-url works? – MMhunter Commented Jul 14, 2016 at 15:07
• when i try to load ng-src value ( i.e data-ng-src="data:image/jpg;base64,base64 string value), it says that this site can't be reached. Is there any problem with my base64 string. I wrote a webservice where it will convert an image from local machine (i.e c:\images) to base64 and send it as a response to angularJS.. In angularJS, I have assigned the response value to $scope.product.image. When I try to load this value using ng-src, I am getting this error. anything am I missing?? – arun kumar Commented Jul 15, 2016 at 4:08

3 Answers 3

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.

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;
}

try using as the below:

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