Blob Bild in html mit angularjs anzeigen

Question

Ich habe einige Bilder als Blob in Mysql-Datenbank gespeichert. Ich möchte es in HTML anzeigen. Ich bekomme die Antwort vom Server wie folgt:

{"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"} 

Ich weiß nicht wirklich, was ich tue. Nach der Suche habe ich festgestellt, dass ich die Blob-Antwort zu base64 konvertieren muss und dann eine temporäre URL für das Bild erstellen und verwenden, um die src für das Bild festzulegen. Wenn ich den responseType auf blob einstelle, ist der Datenteil der Antwort leer ({}). Wenn ich keinen Antworttyp einstelle, erhalte ich ihn als [91,111,98,106,101,99,116,32,70,105,108,101,93].

Dies ist der Code:

$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)); 
     }) 
    } 

Die html:

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

Die fileURL ich nach dem createObjectURL bekommen ist blob:http://192.168.1.19/6d5ab92f-7e86-4537-893c-f22826ed1b5a

Als ich das bekomme ich nicht das Bild . Wenn ich zur URL gehe, ist die Seite leer. Was mache ich falsch?

Answer 1

Ich musste nur die Antwort zu Base64 konvertieren und es anzeigen.

$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)); 

     }) 
    } 

Und in html:

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