net::ERR_INVALID_URL 当从 $http.get 结果设置 <img> src 时

Question

我有一个 angular 指令，它适用于 img 标签并将图像作为 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 错误。请求中 returns 的字符串如下所示： IHDR��^tiDOT@(@@AMposz@IDATx��uw\��ٷ��o��G��B["...

有什么想法吗？

谢谢

Answer 1

在您的请求中指定 responseType，您可能必须禁用 $http 尝试对数据进行的默认转换。

见here

Answer 2

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


      }
    }
  });

Answer 3

我的问题是在 base64 字符串“#zoom=90”之后指定缩放级别

net::ERR_INVALID_URL 当从 $http.get 结果设置 <img> src 时

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

base64

image

src

angularjs

angularjs-directive