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ȯzIDATxuw \ۇٴOGB [” ...

有什么想法吗？

感谢

Answer 1

在This link的帮助下完成工作。

欺骗是使用responseType: "blob"，并使用网址/ 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 2

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

请参阅here

Answer 3

我的问题是在base64字符串'＃zoom = 90'

之后指定缩放级别

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

3 个答案: