在MongoDB中显示Angular.js中的图像

Question

我最近打开了另一个关于如何使用node.js/mongoose在mongodb数据库中存储图像的线程.(用猫鼬保存图像)

我有点工作,但我很确定我目前的方式不是要走的路.这也可能是我无法在前端显示存储的图像的原因.

我有两个问题:

1. 如何使用当前配置显示图像
2. 由于我的代码在这一点上显然是错误的,我仍然想知道如何使用mongoDB存储图像.我应该只存储URL并将图像保存在我的文件服务器上吗？有没有人如何使用GridFSangular/node/mongoose 的工作示例？

这是我将图像保存到数据库的代码:

var split = req.body.data.image.dataURL.split('base64,');
// ... split until I get 'image/png' and the binary of my image
var avatar = {
  data: data,
  contentType: type
};
models.UserImages.create({ avatar: avatar, /* ... */})

和我的Angular Ctrl用于加载图像:

User.findAvatarByUser(data).success(function (data) {
    $scope.avatar = data[0].avatar.data;
});

这显示了以chrome为单位的日志记录.我得到的错误:

任何帮助将非常感激!

编辑: 在丢失像素提示后,我尝试将图像保存到FS.经过一点点麻烦后我终于开始工作了.目前我将图像保存到我的FS,直到我知道我真正想要处理这个问题.

如果有人有同样的问题,这就是我如何在后端保存我的图像(我发现它在stackoverflow上的某个地方,但不幸的是我丢失了链接以给予合适的人,sry为此;))

fs.writeFile(newImageLocation, data, 'base64', function (err) {
        if (err) throw err
        console.log('File saved.')
    });

Answer 1

尝试这样做：

在 Node 中保存图像

ImageController.create({image: new Buffer(req.body.image, "base64")}, 
  function(err, img) {
      if(err) { return handleError(res, err); }
      return res.status(201).json(img);
  }
);

在 Node 中加载和解码

  ImageController.findById(req.params.id, function (err, img) {
    if(err) { return handleError(res, err); }
    if(!foto) { return res.send(404); }
    return res.json(img.toString('base64'));
  });

角度控制器

$http.get('/api/images/'+$scope.image._id).
  then(function (response) {
    $scope.imgSrc = response.data;
  }, function (response) {
  });

角度视图

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