AngularJS - Zeige Byte-Array-Inhalt als Bild

Question

Ich suche in meiner Datenbank ein Bild als Byte-Array. Ich möchte diesen Inhalt als Datei mit dem Markup Bild zeigen, aber es funktioniert hier nicht.

// Controller which get my image and put into $scope. 
function MyController($scope, $http, $location) { 

    var url = '/json/FindImage?id=1'; 
    $http.get(url).success(function(result) { 
     $scope.image = result.Image; 
    } 
} 

// HTML 
<!-- It doesn't work --> 
<img src="{{image}}" /> 
<!-- It doesn't work also --> 
<img ng-src="{{image}}" /> 

Irgendwelche Idee? Danke euch allen!

Answer 1

Verwendung ng-src in folgendem Format

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

Vergessen Sie nicht, sanitization Filter hinzufügen für data nicht als unsafe durch Winkel

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|blob):|data:image\//);

Answer 2

Das src Attribut von img zeigt auf die Quelldatei des Bildes, es enthält nicht die tatsächlichen Quelldaten. Sie können nicht so machen, was Sie wollen; Stattdessen müssten Sie einen Bilddecoder in JavaScript (z. B. https://github.com/devongovett/png.js) schreiben, der in ein canvas-Element ausgegeben wird.

Answer 3

Wenn Sie Ihr Server dazu bringen können, das Bild in einer base64-codierten Zeichenfolge zurückzugeben, können Sie data url als src-Attribut verwenden.