从MongoDB中显示的图像Angular.js [英] Displaying Images in Angular.js from MongoDB

问题描述

我最近开了如何将图像存储在如何使用Node.js /猫鼬MongoDB数据库另一个线程。 （保存图像与猫鼬）

我有点懂了工作，但我pretty确保我目前的方式是不是要走的路。这也可能是为什么我在显示所存储的图像重新站上前台的麻烦。

我有2个问题：

1. 如何与我当前的配置显示图片


2. 因为我的code显然是错误的在这一点上，我仍然不知道什么的路要走存储与MongoDB的图像。我应该只存储URL，并保存在我的文件服务器的形象呢？有没有人如何使用工作的例子 GridFS的具有角/节点/獴？

下面是我的code将图像保存到我的数据库：

  VAR分= req.body.data.image.dataURL.split（'的base64'）;
// ...分裂，直到我得到'图像/ PNG'和我的形象的二进制
VAR头像= {
  数据：数据，
  的contentType：类型
};
models.UserImages.create（{头像：头像，/ * ... * /}）
 

和我的Ctrl键角加载图片：

  User.findAvatarByUser（数据）.success（功能（数据）{
    $ scope.avatar =数据[0] .avatar.data;
}）;
 

这显示了包括镀铬的记录。错误我得到：

任何帮助将是非常美联社preciated！

编辑：
后lostPixels提示我尝试了图像保存到FS。麻烦一点点后，我终于得到了它的工作。就目前而言，我会的图像保存到我的FS，直到我知道我是怎么真的想解决这个问题。

如果任何人有同样的问题，这里是我如何保存在后端我的形象（我发现它计算器的地方，但不幸的是我失去了联系给予信贷给适当的人，对于SRY;））

  fs.writeFile（newImageLocation，数据'的base64'，函数（ERR）{
        如果（ERR）抛出犯错
        的console.log（'文件保存。'）
    }）;
 

解决方案

试着这样做：

在节点保存图片

  ImageController.create（{形象，新的缓冲区（req.body.image，BASE64）}，
  功能（ERR，IMG）{
      如果（ERR）{返回的HandleError（RES，ERR）; }
      返回res.status（201）以.json（IMG）;
  }
）;
 

加载和德code在节点

  ImageController.findById（req.params.id，函数（ERR，IMG）{
    如果（ERR）{返回的HandleError（RES，ERR）; }
    如果（！照片）{返回res.send（404）; }
    返回res.json（img.toString（'的base64'））;
  }）;
 

角位指示

  $ http.get（'/ API /图片/+ $ scope.image._id）。
  然后（功能（响应）{
    $ scope.imgSrc = response.data;
  }，函数（响应）{
  }）;
 

角视图

 ＆LT; IMG NG-SRC =数据：图像/ JPG; BASE64，{{imgSrc}}＆GT;
 

I recently opened another thread on how to store an image in a mongodb database using node.js/mongoose. (Saving image with mongoose)

I kinda got it working, but I'm pretty sure that my current way is not the way to go. This may also be why I'm having trouble showing the stored images back on the frontend.

I have 2 questions:

1. How can I display the image with my current configuration
2. Since my code is clearly wrong at this point I'm still wondering whats the way to go to store images with mongoDB. Am I supposed to only store the URL and save the image on my fileserver? Has anyone a working example on how to use GridFS with angular/node/mongoose?

Here's my code for saving the image into my database:

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, /* ... */})

and my Angular Ctrl for loading the image:

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

this shows the logging in chrome incl. the error I get:

Any help would be much appreciated!

edit: after lostPixels tip I tried saving the image to the FS. After a little bit of trouble I finally got it working. For the moment I'll save the images to my FS until I know how I really want to handle this problem.

if anyone has the same problem, here's how I save my image on the backend (I found it somewhere on stackoverflow, but unfortunately I lost the link to give credit to the right person, sry for that ;) )

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

解决方案

Try to do this:

Saving the image in 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);
  }
);

Loading and decode in 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'));
  });

Angular Contoller

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

Angular view

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

这篇关于从MongoDB中显示的图像Angular.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！