net::ERR_INVALID_URL when setting src from $http.get result

Question

I have a angular directive that works on img tags and loads the image dynamically as a base64 string. I use $http.get to load the image and set it into the img.src like this:

var onSuccess = function(response) {
  var data = response.data;
  element.attr("src", "data:image/png;base64," + data);
};
var onError = function(response) {
  console.log("failed to load image");
};
scope.$watch('authSrc', function(newValue) {
  if (newValue) {
    $http({
      method: "GET",
      url: scope.authSrc,
      data: ""
    }).then(onSuccess, onError)
  }
});

after i set the src attribute, i get the net::ERR_INVALID_URL error. The string that returns from the request looks like this: IHDR��^tiDOT@(@@AMȯz�@IDATx��uw\�ٷ�o��G�B["...

Any ideas?

thanks

score 3 · Accepted Answer · edited May 23 '17 at 12:25

Got it to work will the help of This link.

Trick was to use responseType: "blob", and use URL/webkitURL createObjectURL()

Here's the full directive:

'use strict';

app.directive('authSrc',function ($http) {
    return {
      restrict: 'A',
      scope: {
        authSrc: "="
      },
      link: function (scope, element) {
        var onSuccess = function(response) {
          var data = response.data;
          var url = window.URL || window.webkitURL;
          var src = url.createObjectURL(data);
          element.attr("src", src);
        };

        var onError = function(response) {
          console.log("failed to load image");
        };

        scope.$watch('authSrc', function(newValue) {
          if (newValue) {
            $http({
              method: "GET",
              url: scope.authSrc,
              responseType: "blob"
            }).then(onSuccess, onError)
          }
        });


      }
    }
  });

Worked perfectly! I visited so many forums until I got to this! THANK YOU FOR POSTING! — Khateeb321, Aug 05 '17 at 14:58

score 0 · Answer 2 · answered Jan 28 '16 at 19:51

0

Specify the responseType in your request, and you may have to disable default transforms that $http attempts on the data.

see here

answered Jan 28 '16 at 19:51

tanenbring

780
4
14

Thanks @tanenbring, doesn't look like a request transform problem, but response type helped me get to the answer, which i'll post in a sec – Lior Paz Jan 30 '16 at 09:34

score 0 · Answer 3 · answered Oct 18 '17 at 10:20

0

My problem was specifying a zoom level after the base64 string '#zoom=90'

answered Oct 18 '17 at 10:20

Lord Darth Vader

1,895
1
17
26

net::ERR_INVALID_URL when setting src from $http.get result

3 Answers3