AngularJS - Показать содержимое массива байтов как изображение

Question

Я ищу в своей базе данных изображение как массив байтов. Я хочу показать это содержимое как файл, используя разметку image, но здесь это не работает.

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

Есть идеи? Спасибо всем!

Answer 1

Использования нг-Src в следующем формате

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

Не забудьте добавить фильтр для санитарной обработки data не быть помечена как unsafe угловых данными

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

Answer 2

Атрибут srcimg указывает на исходный файл изображения, он не содержит фактических исходных данных. Вы не можете делать то, что хотите; вместо этого вам придется писать декодер изображений в JavaScript (например, https://github.com/devongovett/png.js), который выводится в элемент canvas.

Answer 3

Если вы можете вернуть серверу в изображение в кодировке base64, вы можете использовать data url в качестве атрибута src.