node.js - 如何从静态后端路径在 Angular 中显示图像？

Question

我在后端有一条保存图像的路径。我可以从 mongo 获取路径并以 Angular 重现该路径，但是，当我将标签与 src 绑定(bind)一起使用时，它不会显示图像和任何错误:

组件内部的路径:

this.profileService.getImg().subscribe(res => this.imagePath = res['img']);

控制台日志的返回:

console.log(this.imagePath);

http://localhost:3000/avatars/5db84cdf4c6efe073864f9e7.jpeg

html 标签:

<img [src]="imagePath">

我尝试了在其他帖子中找到的几种方法，但无法使其发挥作用。知道发生了什么以及如何解决这个问题吗？

更新和更多详细信息

在服务器端，我通过这种方式返回 mongo 的路径:

router.get('/:id', (req, res, next) => {
    Avatar.getAvatarById(req.params.id, (err, avatar) => {
        if(err) throw err;
        if(!avatar){
            return res.json({success: false, msg: 'No avatars found'});
        }
        res.json({
            success: true,
            avatar: avatar
        });
    });
});

其中 Avatar.getAvatarById 是:

module.exports.getAvatarById = function(id, callback){
    const query = { avatar: {$regex: ".*"+id+".*" }}
    Avatar.findOne(query, callback);
}

我像这样公开头像路径:

app.use('/avatars', express.static('avatars'));

当我尝试通过点击http://localhost:3000/avatars/5db84cdf4c6efe073864f9e7.jpeg来访问路径时在浏览器中，它返回 json 而不是渲染图像。

{
 "success":true,
 "avatar": {
     "_id":"5dc17fc9f383424158c59754", 
     "avatar":"http://localhost:3000/avatars/5db84cdf4c6efe073864f9e7.jpeg","__v":0
 }
}

还尝试使用bypassSecurityTrustResourceUrl来克服安全性，并使用*ngIf在URL存在时进行显示。

this.photoUrl = this.sanitizer.bypassSecurityTrustUrl(res['avatar']['avatar']);

<img *ngIf="photoUrl" [src]="photoUrl">

它不会返回任何错误，并且仍然不显示图像。

如果我尝试点击 bypassSecurityTrustUrl 函数内的路径进行测试，并删除 *ngIf，它会返回:

null:1 GET http://localhost:4200/null 404 (Not Found)

Answer 1

使用属性绑定(bind)应该有效:

 <img [src]="imagePath">

但您也可以尝试字符串插值:

 <img src="{{imagePath}}">