设置网:: ERR_INVALID_URL当＆LT; IMG＆GT; SRC从$ http.get结果 [英] net::ERR_INVALID_URL when setting <img> src from $http.get result

问题描述

我有一个角指令上的img标签的工作原理和动态加载图像为Base64字符串。我用$ http.get加载图像，并将其设置成这样的img.src：

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

后，我设置了src属性，我得到的网:: ERR_INVALID_URL 错误。
从请求返回的字符串看起来是这样的：
IHDR ^ tiDOT @（@@AMȯz@ IDATxuw \\ۇٴ英国乐施会[...

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["...

任何想法？

感谢

推荐答案

得到它的工作将在<一的帮助href=\"http://stackoverflow.com/questions/17657184/using-jquerys-ajax-method-to-retrieve-images-as-a-blob?answertab=votes#tab-top\">This链接。

诀窍是使用的responseType：斑点，并使用URL / webkitUR​​L createObjectURL（）

Trick was to use responseType: "blob", and use 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)
          }
        });


      }
    }
  });

这篇关于设置网:: ERR_INVALID_URL当＆LT; IMG＆GT; SRC从$ http.get结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！