无法使用MEAN堆栈显示图像

我正在使用MEAN堆栈，并试图显示存储在我的Mongo数据库中的图像。 我相信图像被正确存储并正确传递到浏览器，因为当我使用Web控制台，并看看我的post响应身体显示图像的响应。

我有一个表，当一个单击行时，它会打电话给我的控制器：

$scope.detailRequest = function(index){ $scope.selectedRow = index; $scope.selected = this.contact; $http.post('/DetailRequest', $scope.selected).success(function(response){ $scope.detailResponse = response; }); }; 

在节点我查询Mongo并返回图像：

 router.post('/DetailRequest', function(request, response) { reports .findOne({_id : request.body._id}) .select('img') .exec(function (err, research) { response.contentType(research.img.contentType); response.send(research); }); }); 

我正在使用ng-src进行图像显示。 正如我在页面顶部提到的，我可以在Web控制台的Response Body中正确地看到图像。 因此，我有信心将图像传回浏览器。

 <img ng-src="{{detailResponse}}"> 

图像不会显示

Answer 1

你的电线在这里交叉了一点。

ng-src会将Img src属性设置为一个URL。 然后浏览器将加载一个GET请求的src URL。

 <img ng-src="{{someUrlRequestedWithGet}}"> 

所以你的快车路线应该是一个GET ：

 router.get('/DetailRequest/:id', function(request, response) { reports .findOne({_id : request.params._id}) .select('img') .exec( function (err, research) { response.contentType(research.img.contentType); response.send(research); }); 

注意：不要把id放在正文中，而是放在URL中。

提示：无论粘贴到浏览器栏中的ng-src中的URL是什么都应该显示。

还有一种方法可以从POST获取图像数据（尽pipe这不是POST的最佳使用方式 ）。 但是你将不得不做更多的战术，并使用数据 – uri

Answer 2

所以，在Angular的这些线上的东西应该工作：JavaScript：
$scope.imageData = 'data:image/jpeg;base64' + Base64LongLongString;

模板：
<img ng-src="imageData" />

让我们看看为什么它应该工作。
<img src="">需要一个uri，所以如果我们在这个属性中inputuri，那么在你的情况下不起作用。 与uri ng-src会有同样的问题。

embedded二进制数据的图像具有以下src属性：
<img src="data:image/jpeg;base64,/9j/Base64LongLongString">
更多关于这种表示在http://ben.lobaugh.net/blog/33713/using-binary-image-data-to-display-an-image-in-html