从 MongoDB 在 Angular.js 中显示图像

Posted 2023-03-11

【中文标题】从 MongoDB 在 Angular.js 中显示图像

【英文标题】：Displaying Images in Angular.js from MongoDB

【发布时间】：2015-02-06 16:13:44

【问题描述】：

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

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

我有两个问题：

如何使用当前配置显示图像 由于此时我的代码显然是错误的，我仍然想知道用 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 incl 的日志记录。我得到的错误：

任何帮助将不胜感激！

编辑： 在 lostPixels 提示后，我尝试将图像保存到 FS。经过一点点麻烦，我终于让它工作了。目前我会将图像保存到我的 FS，直到我知道我真正想要如何处理这个问题。

如果有人遇到同样的问题，这就是我将图像保存在后端的方法（我在 *** 上的某个地方找到了它，但不幸的是，我丢失了链接以将功劳归于正确的人，对不起；））

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

【问题讨论】：

我建议沿着将图像保存到文件系统的路线，然后将它们的 URL 存储在您的数据库中。将图像存储为 base64 字符串可能会导致性能下降和庞大的数据库。

【参考方案1】：

尝试这样做：

将图像保存在节点中

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">

【参考方案2】：

角度视图：

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

page.Date 是 mongodb 中的一个字段（图像）：

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