AngularJS

Question

目的を使って、ビュー上でMySQLからLONGBLOBの写真を表示：AngularJSを使用して、私のhtmlページ上の異なる画像を表示し、ただ1つのサーブレット（画像はリクエストパラメータに応じて変化します[「ID」変数]）

コード説明：paramsはとして

• IのIDを渡すことによって、サーブレットへリクエストを送る= 13（JS コードを参照）
• サーブレットは、DBに格納された写真は、応答値がされるID = 13
• を有する検索します合格$ scopeの変数 "image"へ

問題：画像は私のビューには表示されません。

エラークロームコンソール： http://localhost:8080/MyProject/%7B%7Bimage%7D%7D 404（見つかりません）

にconsole.log（レスポンス）結果： オブジェクト{データ：」...、状況：200、設定：オブジェクト、STATUSTEXT ：}

追加情報 "OK"：意志

• を私は "Integer.parseInt（request.getParameter（" ID "））" を "13" から "ID" の割り当てを変更した場合は、私のイメージServlet URLに適切に表示されます。つまり、ファイルが正しく検索され、コード化される。
• "int"の後にSystem.out.println（id）を追加した場合 id = Integer.parseInt（request。getParameter（「ID」））」、正しく、私は私のビューに表示したい
• 写真をサーブレットにJSファイルから渡されparamsをLONGBLOB

としてMySQLに保存されていることを意味する、値として13 が表示されます

-

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

あなたがそうでなければ、直接

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

をブロブを期待するのは、あなたの$httpの呼び出しを変更したくない場合は、pass responseType: 'blob' into itのでresponse.dataはBLOBとして開始します

---

そして、あなたがこの画像を完了したら

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