The DEMO

Question

我们在HTML页面中显示用户的详细信息，除了包含其中的链接项的其他详细信息之外，它还从数据库中检索存储为用户BLOB的图像。写入我们的角度服务，单击链接项打开（实际上是数据库中该图像的文件名），然后在显示图像的浏览器窗口中单击。存储和检索图像都可以正常工作现在我们的要求是只需在第一次加载HTML页面时加载图像作为预览。

Angular服务就像

getDownloadDoc: function(empId) {

  return $http.get(contextPath1 + "/PdfServletDoc?documentID=" + empId + "", {
    responseType: 'arraybuffer'
  }).then(function(response) {
    var data = response.data;
    var file = new Blob([data], {
      type: 'image/jpeg'
    });
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);
    return response;
  });
},

我是AngularJs的新手，如果只能获取资源或文档来查找它。这将有所帮助

Answer 1

我假设您的图片已完美下载，而fileURL包含图片路径，然后你可以做但首先将fileURL传递给控制器和你的模板文件：

<img ng-src={{fileURL}}></img>

在控制器中：

你会像这样打电话给你的角色服务：

function yourImageSuccessHandler(fileUrl, options) {
            $scope.fileUrl = fileUrl; // now you will have fileUrl in 
                                      // controller
        }
        yourService.getDownloadDoc(empId, {
            successCallBack: yourImageSuccessHandler
        });

在服务中

getDownloadDoc : function(empId, options) {

    return $http.get(contextPath1+"/PdfServletDoc?documentID="+empId+"", {
                        responseType : 'arraybuffer'
                    }

            ).success(function(data) {
                var file = new Blob([ data ], {
                    type : 'image/jpeg'
                });
                var fileURL = URL.createObjectURL(file);

                if(options && options.successCallBack) {
                    return options.successCallBack(fileURL, {});
                }
            });
        },

Answer 2

不是从数组缓冲区创建dataURL，而是将responseType设置为“blob”。

要使用ng-src directive将blob显示为图像，请将blob转换为URL.createObjectURL()的数据网址：

  var config = {
      responseType: 'blob'
  };
  $http.get(url,config)
    .then(function(response) {
      vm.blob = response.data;
      vm.dataURL = URL.createObjectURL(vm.blob);
  });

  <h1>Blob image demo</h1>
  <img ng-src="{{dataURL}}">

The DEMO

angular.module("app",[])
.run(function($rootScope, $http) {
  var vm = $rootScope;
  var config = {responseType: 'blob'};
  var url = "https://i.imgur.com/YnjcO.jpg"
  $http.get(url,config)
    .then(function(response) {
      vm.blob = response.data;
      vm.dataURL = URL.createObjectURL(vm.blob);
  });
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app=app>
    <h1>Blob image demo</h1>
    <img ng-src="{{dataURL}}" style="width: 200px">
  </body>

更新

img src指向URL，但它显示的是图像src unsafe blob并且只显示小图像图标。我试着添加
$compileProvider.aHrefSanitizationWhitelist(
     /^\s*(https?|ftp‌‌|mailto|chrome-ext‌en‌sion):/
  ); 
$compileProvider.imgSrcSanitizationWhitelist(
    /^\s*(https?|f‌‌tp|mailto|chrome-ex‌t‌ension):/
);  
但仍面临同样的问题

使用AngularJS V1.6 或将默认卫生设置设置为：

var aHrefSanitizationWhitelist = 
                 /^\s*(https?|ftp|mailto|tel|file):/;
var imgSrcSanitizationWhitelist = 
                 /^\s*((https?|ftp|file|blob):|data:image\/)/;

欲了解更多信息，

在angularjs中显示Blob图像

2 个答案:

在控制器中：

在服务中

The DEMO

更新