Question

我已经检查了this post和this post但他们不能工作。我使用 gridfs-locking-stream 在mongodb中成功存储.png图像，并检索该图片。

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

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

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

输出看起来很奇怪，问题是图片没有显示在视图中。我正在努力工作几周。如果你帮助过我会没事吗？

从GridFS在我的HTML中显示图像

0 个答案: