Question

我正在搜索我的数据库中的图像作为字节数组。我想使用标记图像将此内容显示为文件，但它在此处不起作用。

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

使用以下格式的ng-src

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

不要忘记添加data的清理过滤器，使其不会被角度标记为unsafe：

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

Answer 2

如果您可以让服务器以base64编码的字符串返回图像，则可以使用data url作为src属性。

Answer 3

确保您要返回的数据显示为图像转换为 ToBase64String

在您的C＃代码中，使用Convert.ToBase64String（imageBytes）并在视图中使用此

Answer 4

src的{{1}}属性指向图像的源文件，它不包含实际的源数据。你不能以这种方式做你想做的事;相反，你必须用JavaScript编写一个图像解码器（例如，https://github.com/devongovett/png.js），它输出到img元素。

AngularJS - 将字节数组内容显示为图像

4 个答案: