javascript - 在angularjs中显示Blob图像

Question

我们在 HTML 页面中显示用户的详细信息，除了其他详细信息外，它还包含一个链接项，该链接项从数据库中检索存储为用户的 BLOB 图像。我们的 Angular 服务是这样编写的，单击链接项打开(实际上是数据库中该图像的文件名)显示图像的浏览器窗口。存储和检索图像都工作正常现在我们的要求是在第一次加载 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 传递给 Controller ​​并在你的模板文件中:

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

在 Controller 中:

您将这样调用您的 Angular 服务:

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