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

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

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

Любая идея? Спасибо всем!

Ответы

Ответ 1

Используйте ng-src в следующем формате

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

Не забудьте добавить фильтр очистки, чтобы data не были помечены как unsafe помощью angular:

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

Ответ 2

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

Ответ 3

Убедитесь, что данные, которые вы возвращаете для отображения в виде изображения, конвертируются в ToBase64String

В вашем коде С# используйте Convert.ToBase64String (imageBytes) и в представлении используйте это

Ответ 4

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