Get Data:image/png;base64,{{image}} Net::err_invalid_url

I want to convert image data that I get from server using Angular.js (for use in ionic-framework), I have use this code : $http.post(link, { token: token, reser

Solution 1:

Though a late answer, but will be helpful for future readers:

What you should do is:

<imgng-src="data:image/png;base64,{{image}}">

That would mean that the browser will try to access it only when the data is loaded and will be taken care by AngularJS and hence you will not get that error anymore.

Solution 2:

A working approach to base64 encoding of images is to use Canvas and toDataURL() method, but you need to load your image data from server to an Image istance (via src property). Here is an example:

functiongetBase64() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.onload = function () {
        ctx.drawImage(img, 0, 0);
        // pay attention: image here contains complete base 64 data url, no need for "data:image/png;base64," header...$scope.image = canvas.toDataURL();
        if (!$scope.$$phase) $scope.$apply();
    };
    img.src = "http://.../myImagepng";
}

Preferably you could encode to base64 your image on the server side and return the response to the client already encoded. For example in PHP:

$pathToImg = 'myfolder/myimage.png';$type = pathinfo($pathToImg, PATHINFO_EXTENSION);$data = file_get_contents($pathToImg);$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);