Question

我正在使用MEAN堆栈并尝试显示存储在Mongo数据库中的图像。我相信图像已正确存储并正确传递到浏览器，就像我使用Web控制台并查看响应主体的响应一样，响应主体显示图像。

我有一张桌子，当点击一行时，它会调用我的控制器：

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

在节点I中查询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控制台的响应主体中正确地看到图像。因此，我相信我将图像恢复到浏览器。

<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放在正文中，而是将其放在网址中。

提示：当粘贴到浏览器栏中时，应显示ng-src中的任何URL。

还有一种从POST获取图像数据的方法（尽管那是not really the best use of POST）。但你必须采取更多战术并使用data-uri

Answer 2

因此Angular中的这些内容应该有效： JavaScript的：
$scope.imageData = 'data:image/jpeg;base64' + Base64LongLongString;

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

让我们看看它应该起作用的原因 <img src="">期待一个uri，如果我们在这个属性中提供uri，那么就不会在你的情况下工作。与{uri ng-src会有同样的问题。

嵌入了二进制数据的图像的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

的此表示的更多信息

无法使用MEAN堆栈显示图像

2 个答案: