Question

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

中间件控制器：

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

我甚至已经从浏览器测试了这项服务并且工作成功但是当我尝试使用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中使用此编码字符串，但无济于事。任何帮助将不胜感激/

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

＆＃34; res.sendFile＆＃34;的组合在expressjs中间件和＆＃34; ng-src＆＃34;在角客户端不起作用

1 个答案: