AngularJS - Pokaż zawartość tablicy bajtów jako obrazu

Question

Wyszukiwanie w bazie danych obrazu jako tablicy bajtów. Chcę pokazać tę zawartość jako plik przy użyciu znacznika image, ale nie działa tutaj.

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

Masz pomysł? Dziękuję wszystkim!

Answer 1

Zastosowanie ng-src w następującym formacie

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

Nie zapomnij dodać filtr sanitization dla data aby nie być oznaczony jako unsafe przez kątową danych

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

Answer 2

Atrybut src z img wskazuje na plik źródłowy obrazu, ale nie zawiera faktycznych danych źródłowych. Nie możesz robić tego, co chcesz w ten sposób; zamiast tego trzeba by napisać dekoder obrazu w JavaScript (np. https://github.com/devongovett/png.js), który wysyła do elementu canvas.

Answer 3

Jeśli możesz uzyskać serwer do zwrócenia obrazu w zakodowanym łańcuchu base64, możesz użyć atrybutu src jako data url.