expressjs 中间件中的“res.sendFile”和角度客户端中的“ng-src”的组合不起作用答案

【问题标题】：combination of "res.sendFile" at expressjs middleware and "ng-src" at angular client does not workexpressjs 中间件中的“res.sendFile”和角度客户端中的“ng-src”的组合不起作用
【发布时间】：2017-08-06 16:53:38
【问题描述】：

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

中间件控制器：

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

我什至已经从浏览器测试了这个服务并且运行成功，但是当我尝试使用带有如下数据 url 的 ng-src 显示这个头像服务的响应时，它没有工作。

客户端控制器：

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 中使用此编码字符串，但无济于事。任何帮助将不胜感激/

【问题讨论】：

您的数据包含什么？应该是data.data
@Vivz，data 包含 res.sendFile 返回的字节流；数据看起来像这样 "Resource {0: "�", 1: "�", 2: "�", 3: "� ", 4: " ", 5: "", 6: "J", 7: "F", 8: "I", 9: "F", 10: ".." 索引直到 68889
您必须将路径传递给头像变量中的图像文件。
@VivZ，为什么呢？这不是通过 URL 提供的静态图像；我正在考虑返回一个字节或编码字符串；如果我说的不对，您能帮忙返回显示图像的路径吗？
谢谢@Vivz，成功了！我不需要从控制器中访问中间件，但拥有这个 ng-src="/users/{{user._id}}/avatar" 本身就足够了！请添加您的评论作为答案！

标签： angularjs node.js express

【解决方案1】：

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

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

【讨论】：