在Angular JS中将图像blob应用于src？答案

【问题标题】：Applying image blob to src in Angular JS?在Angular JS中将图像blob应用于src？
【发布时间】：2017-09-11 02:54:48
【问题描述】：

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

我正在接收响应、获取 blob 并创建对象 URL。所有这些都有效。我已经检查了 blob，可以确认它是正确的。

当我尝试将objectUrl 应用于src 时，问题就出现了。我尝试了一个使用我知道有效但没有身份验证的 sn-p 的简化示例。这在我的 Angular 应用程序中不起作用，但在 vanilla JS 中起作用。

我对@987654326@ 了解不多，但如果它有所作为，当我检查空图像时，我发现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);
    });
  }
}]);

【问题讨论】：

请为将来，如果您需要适当的帮助，请注意标记，angular-tag 指的是 angular
@AJT_82 我的错，谢谢。
本教程将帮助developer.mozilla.org/en-US/docs/Web/API/FileReader/…
对象 URL 指向浏览器本地的对象，例如blob URLs 数据 URL。删除 blob：在 https 的开头。
@bhantol 我试过了。我只是被 ui-router 重定向。

标签： javascript angularjs image blob src

【解决方案1】：

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

【讨论】：

它是二进制的。但是 Postman 显示得很好。我已经转换为 base64 并尝试过这种方式，但这似乎也不起作用。
请试一试 $sce 并检查它是否可以渲染图像。您是否看到空框或未找到图像图标？
是的。它显示“找不到图像”。

【解决方案2】：

下载二进制信息时，设置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。

【讨论】：

【解决方案3】：

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

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

这是我的最终代码。

app.directive('authenticatedSrc', ['authenticatedHttp', function (authenticatedHttp) {
  var directive = {
      link: link,
      restrict: 'A'
  };
  return directive;
  function link(scope, element, attrs) {
    var requestConfig = {
      cache: 'false',
      responseType: 'blob'
    };
    authenticatedHttp.get(attrs.authenticatedSrc, requestConfig).then(function(response) {
      var reader = new window.FileReader();
      reader.readAsDataURL(response.data);
      reader.onloadend = function() {
        attrs.$set('src', reader.result);
      };
    });
  }
}]);

【讨论】：