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

Question

我最近打开了另一个关于如何使用node.js / mongoose在mongodb数据库中存储图像的线程。 （Saving image with mongoose）

我有点工作，但我很确定我目前的方式不是可行的方法。这也可能是我在前端显示存储图像时遇到问题的原因。

我有两个问题：

1. 如何使用当前配置显示图像
2. 由于我的代码在这一点上显然是错误的，我仍然想知道如何使用mongoDB存储图像。我应该只存储URL并将图像保存在我的文件服务器上吗？有没有人如何使用GridFS与angular / 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

尝试这样做：

将图像保存在节点

中

read

在节点中加载和解码

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

Angular Contoller

  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) {
  });

Answer 2

角度视图：

[ngStyle]="{'background-image': 'url(' + 'data:image/gif;base64,' +page.Data + ')'}"

该页面。日期是mongodb中的一个字段（图像）：

page.Data : fs.readFileSync(meGifFile, {encoding: 'base64'}),