使用 AngularJS 在视图上显示来自 MySQL 的 LongBlob 照片

Question

目的：使用AngularJS和一个Servlet在我的html页面上显示不同的图像（图像会根据请求参数["id"变量]）

代码解释：

我通过将 id=13 作为参数传递给 Servlet 来发送请求（参见 JS 代码）
Servlet 将检索存储在 id=13 的数据库中的照片
响应值将传递给 $scope

问题：图像没有出现在我的视图中。

错误Chrome控制台： http://localhost:8080/MyProject/%7B%7Bimage%7D%7D 404（未找到）

Console.log（响应）结果：对象 {data: "��..., status:200, config:Object, statusText:"OK"}

附加信息：

如果我将 "id" 作业从 “Integer.parseInt(request.getParameter("id"))”到“13”，我的图像将正确显示在 Servlet URL 上，这意味着文件已正确检索和编码.
如果我在“int”后面加上System.out.println(id) id=Integer.parseInt(request.getParameter("id"))",会显示13 作为值，这意味着参数从 JS 文件正确传递到 Servlet
我想在我的视图中显示的照片存储在 MySQL 上作为 longBlob

-

MY HTML CODE: 
... 
<img class="images" src="{{image}}"/>
...

-

MY ANGULAR JS CODE:

 ...
    $http.get('./ImagesServlet', {params: {id:13}})
    .then(function(response) {
       console.log(response)
       $scope.image = response.data;
    });
...

-

ImagesServlet CODE:
...
int id = Integer.parseInt(request.getParameter("id"));
PoiDao fetcher = new PoiDao();
try {
    List<PoiImg> image = fetcher.ImgById(id);
    response.setContentType("image/png");
    Blob img = image.get(0).getPhoto();
    InputStream in = img.getBinaryStream();
    int length = (int) img.length();
    int bufferSize = 1024;
    byte[] buffer = new byte[bufferSize];
    while ((length = in.read(buffer)) != -1) {
        response.getOutputStream().write(buffer, 0, length);
    }

} catch (ClassNotFoundException | SQLException e1) {
    e1.printStackTrace();
}
...

Answer 1

JavaScript

如果您不想将 $http 调用更改为直接期待 Blob，

let blob = new Blob([response.data], {type: 'image/jpeg'});

否则，pass responseType: 'blob' into it 所以 response.data 将作为 Blob

开始

然后将其转换为 URL 您可以从 HTML 页面访问

let url = URL.createObjectURL(blob); // note this will prevent GC of blob

最后，如果你想干净一点，当你完成这张图片时

URL.revokeObjectURL(url); // frees blob to be GCd

使用 AngularJS 在视图上显示来自 MySQL 的 LongBlob 照片

Showing LongBlob photos from MySQL on View by using AngularJS

javascript

mysql

servlets

blob

angularjs