Question

我有一些提供图像的API端点，但所说的图像需要身份验证。我有一个服务（authenticatedHttp），它是$ http的抽象，并处理身份验证令牌管理。（这被证实是有效的，并且所有意图和目的也可能是$http）

我收到回复，获取blob并创建对象URL。所有这一切都有效。我检查了blob并确认它是正确的。

当我尝试将objectUrl应用于src时，会出现此问题。我尝试了一个简单的例子，我使用的片段我知道工作，没有身份验证。这在我的Angular应用程序中不起作用，但在vanilla JS中有效。

我对ObjectUrl了解不多，但如果它有所不同，当我检查空图像时，我看到它是src是正确的，如果我点击创建的链接（例如。blob:https://sub.domain.dev/de4db0e0-77c8-44bc-a934-0d270ab81687）我被ui-router重定向。

为什么会发生这种情况，我该如何纠正？

app.directive('authenticatedSrc', ['authenticatedHttp', function (authenticatedHttp) {
  var directive = {
      link: link,
      restrict: 'A'
  };
  return directive;
  function link(scope, element, attrs) {
    var requestConfig = {
      cache: 'false'
    };
    authenticatedHttp.get(attrs.authenticatedSrc, requestConfig).then(function(response) {
      var objectUrl = window.URL.createObjectURL(new Blob([response.data], { type: 'image/png' }));
      attrs.$set('src', objectUrl);
    });
  }
}]);

Answer 1

下载二进制信息时，设置responseType：

非常重要

app.directive('authenticatedSrc', ['authenticatedHttp', function (authenticatedHttp) {
  var directive = {
      link: link,
      restrict: 'A'
  };
  return directive;
  function link(scope, element, attrs) {
    var requestConfig = {
      //IMPORTANT
      responseType: 'blob',
      cache: 'false'
    };
    authenticatedHttp.get(attrs.authenticatedSrc, requestConfig).then(function(response) {
      //var objectUrl = window.URL.createObjectURL(new Blob([response.data], { type: 'image/png' }));
      var blob = response.data;
      attrs.$set('src', blob);
    });
  }
}]);

否则，从UTF-8到DOMstring (UTF-16)的转换会损坏数据。

有关详细信息，请参阅MDN XHR API ResponseType。

Answer 2

@Kaiido也是正确的，但这不是我的主要问题。

@georgeawg解决了我的大部分问题，但我没有接受他的回答，因为他的实现（直接使用blob作为源代码）对我不起作用。

这是我的最终代码。

SELECT "Order", "Date", "Value"
FROM (
    select t.*, 
           row_number() 
               over (partition by "Order" order by "Date" desc, "Value" desc ) As rn
    FROM table1 t
) x
WHERE rn = 1

Answer 3

response.data的返回类型是什么？它是base64编码的字符串吗？当直接在src属性中提供时，Img标记可以很好地渲染base64编码的图像。此外，请尝试使用angularjs的$ sce服务将此objectUrl信任为有效的Url。添加到src属性时$ sce.trustAsURL（objectUrl）。更多信息https://docs.angularjs.org/api/ng/service/ $ sce

将图像blob应用于Angular JS中的src？

3 个答案: