angularjs - ExpressJS 中间件的 "res.sendFile"和 Angular 客户端的 "ng-src"的组合不起作用

Question

我正在尝试使用头像图片创建用户个人资料；我已经使用multer成功上传头像图片了；现在我正在尝试提供一个编辑个人资料的选项；作为此编辑的一部分，我必须在客户端显示头像图片；我在中间件中编写了一个服务，使用 res.sendFile 返回头像图像；

中间件 Controller :

exports.readAvatar = function(req, res) {
    if (req.user) {
        res.sendFile(path.resolve(__dirname + "/../../uploads/" + req.user.avatar));
    }
}   

我什至通过浏览器测试了此服务，并且工作正常，但是当我尝试使用 ng-src 和如下数据 url 显示此头像服务的响应时，它不起作用。

客户端 Controller :

Users.avatar($routeParams.userId).then(function(data) {
    $scope.avatar = "data:image/jpeg;base64,"+data;
}, function(errorResponse) {
    $scope.error = errorResponse.message
});

HTML:

   <img data-ng-src="{{avatar}}" >

我google了一下，发现res.sendFile实际上是在发送字节流；所以我尝试将其转换为字符串，然后对转换后的字符串进行编码并在 ng-src 中使用此编码字符串，但无济于事。任何帮助将不胜感激/

Answer 1

您必须将正确的路径值传递给 ng-src。

JS

Users.avatar($routeParams.userId).then(function(response) {
    //capture whatever is necessary to show image
    $scope.user=response.data;
}, function(errorResponse) {
    $scope.error = errorResponse.message
});

HTML

<img ng-src="/users/{{user._id}}/avatar">

了解更多信息:https://docs.angularjs.org/api/ng/directive/ngSrc