angularjs - net::ERR_INVALID_URL 当从 $http.get 结果设置 src 时

Question

我有一个适用于 img 标签的 Angular 指令，并将图像动态加载为 base64 字符串。我使用 $http.get 加载图像并将其设置到 img.src 中，如下所示:

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

设置 src 属性后，出现 net::ERR_INVALID_URL 错误。从请求返回的字符串如下所示:IHDR����^tiDOT@(@@AMşz�@IDATx���uw\�ٷ�o�����G�B["...

有什么想法吗？

谢谢

Answer 1

在 This link 的帮助下让它开始工作.

技巧是使用 responseType: "blob"，并使用 URL/webkitURL createObjectURL()

这是完整的指令:

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


      }
    }
  });