anglejsでhtmlのblobイメージを表示

Question

私はいくつかのイメージをmysqlデータベースにBLOBとして保存しています。私はhtmlでそれを表示したい。私はこのようなサーバーからの応答を得ます：

{"data":[{"ClassImage":{"type":"Buffer","data":[91,111,98,106,101,99,116,32,70,105,108,101,93]}}],"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"http://192.168.1.19:80/getImage","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"OK"} 

私は何をしているのか分かりません。私は、BLOBレスポンスをbase64に変換してからイメージの一時URLを作成し、イメージ用にsrcを設定する必要があることを発見しました。

応答タイプをblobに設定すると、応答のデータ部分が空になります（{}）。応答タイプを設定しないと、[91,111,98,106,101,99,116,32,70,105,108,101,93]となります。

これはコードです：

$scope.getImage = function(){ 
     $http({ 
      method:'GET', 
      url: $scope.ipForHttp+"getImage" 
      // responseType:'arrayBuffer' 
     }) 
     .then(function(response){ 
      var u8 = new Uint8Array(response.data[0].ClassImage.data); 
      var b64encoded = btoa(String.fromCharCode.apply(null, u8)); 
      var file = new Blob(u8, {type: 'image/png'}); 
      $scope.fileURL = URL.createObjectURL(file); 
      $scope.content = $sce.trustAsResourceUrl($scope.fileURL); 

      console.log($scope.fileURL); 
      console.log(JSON.stringify(response)); 
     }) 
    } 

HTML：私はこれを行うと

 <div> 
      Image: 
      <!-- <img ng-src="{{content}}"> --> 
      <!-- <img data-ng-src="data:image/png;base64,{{b64encoded}}"> --> 
      <img ng-src="{{fileURL}}"> 
      <p>{{fileURL}}</p> 
     </div> 

私はcreateObjectURL後に取得fileURLは、私は、画像を得ることはありませんblob:http://192.168.1.19/6d5ab92f-7e86-4537-893c-f22826ed1b5a

です。私がURLに行くと、そのページは空白になります。私は間違って何をしていますか？

Answer 1

私は、応答をbase64に変換して表示するだけでした。

$scope.getImage = function(){ 
    $http({ 
     method:'GET', 
     url: $scope.ipForHttp+"getImage" 
      // responseType:'arrayBuffer' 
     }) 
    .then(function(response){ 

     $scope.b64encoded = btoa(String.fromCharCode.apply(null, response.data[0].ClassImage.data)); 

     }) 
    } 

とHTMLで

：

<img data-ng-src="data:image/png;base64,{{b64encoded}}">