Mongodb 从GridFS在我的HTML中显示图像

我检查过了，但它们不起作用。 我使用gridfs-locking-stream成功地在mongodb中存储了一个.png图像，并检索了该图像

这是执行db.fs.files.find（）.pretty（）命令后数据库的外观： 我已经编写了一个名为sendFileToView的函数，以便可以多次使用它。函数接收图片的id，并返回读取流：

function sendFileToView(id, callback) {
gfs.createReadStream({_id: id},
    function (err, readstream) {
        if (err) callback(err, null);
        else {
            if (readstream) {
                callback(null, readstream);
            }
        }
    });
}

我在我的路由器中使用这个功能，如下所示：

PicturesRouter.route('/:picId')

.get(function (req, res, next) {
    console.log(req.params.picId);
    GridFS.sendFileToView(req.params.picId,
        function (err, readStrem) {
            if (err) next(err);
            else if (readStrem) {
                res.writeHead(200, {'Content-Type': 'image/png'});
                readStrem.pipe(res);
            }
        })
});

现在在我的客户端，我有这个服务。该服务有一个只返回$resource的函数，以便我可以在控制器中使用它：

.service('lessonsService', ['$resource', '$http', 'baseURL',
function ($resource, $http, baseURL) {
  this.picturesRes = function () {
    return $resource(baseURL + 'pictures/:id');
  }
}])

最后，我尝试在html页面中显示图像：

lessonsService.picturesRes().get({id: "59a14427884e6a1f58a1e21d"})
    .$promise.then(function (response) {
      console.log('success function');
      console.log(response);
      $scope.imgSource = 'data:image/jpeg;base64,' + btoa(response);
    },
    function (response) {
      console.log("failure function");
      console.log(response);
    });

在HTML中：

<img src={{imgSource}} alt="Something">

如您所见，我正在控制台中打印响应，以查看其外观。这就是我得到的：

输出看起来很奇怪，问题是图片没有显示在视图中。 我已经花了好几个星期的时间在这上面了。如果你帮我，可以吗