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

【问题标题】：AngularJS - Show byte array content as imageAngularJS - 将字节数组内容显示为图像
【发布时间】：2013-02-20 12:23:41
【问题描述】：

我正在我的数据库中搜索一个字节数组的图像。我想使用标记 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}}" />

有什么想法吗？谢谢大家！

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

按以下格式使用ng-src

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

不要忘记为data 添加一个清理过滤器，以便不被角度标记为unsafe：

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

【讨论】：

GET data:image/PNG;base64,etc.net::ERR_INVALID_URL for me
@Assem ，甚至得到了 net::ERR_INVALID_URL。可能是什么问题。
@Hema，是的，实际上我猜这个问题是 java 方面的。现在在前端我有和 java 方面我有一个 ByteArrayOutputStream 对象，我像那个 byte[] imageBytes = baos.toByteArray();String b64 = Base64.encodeBase64String(imageBytes);baos.close();然后把我的字符串放在一个 json 中。
嗨@Assem-Hafez，应该在哪里添加消毒文件？
@CiaranGallagher 这应该进入你的配置 angular.module('myApp').config(['$compileProvider', function($compileProvider) { $compileProvider.aHrefSanitizationWhitelist(/^\s*( https?|file|ftp|blob):|data:image\//); } ]);

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

在您的 C# 代码中，使用 Convert.ToBase64String(imageBytes) 并在视图中使用此

【讨论】：

【解决方案4】：

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

【讨论】：