angular - Angular：从后端检索用户数据后显示个人资料图片

Question

所以我加载组件并在初始化时从后端检索用户数据（带有指向个人资料图片的链接）。然后我想在我的模板中显示这张个人资料图片。

我想我可以通过将 SRC 属性放在括号之间并将其链接到组件的 profilePic 属性来做到这一点。我还在 img 标签中添加了一个 ngIf。

不幸的是，它没有以这种方式显示配置文件。有人能告诉我为什么以及如何解决这个问题吗？

（我从后端返回的数据没有问题）

模板

<img *ngIf="profilePic" class="img__profile-picture" [src]="profilePic" alt="profile-pic">

零件

export class ProfileNavComponent implements OnInit {

    fileToUpload: File = null;
    profilePic = null;

    constructor(private userService: UserService, private authService: AuthenticationService){}

    ngOnInit(){
        this.getUserData()
    }

    getUserData(){
        if (this.authService.isLoggedIn()) {
            let userId = this.authService.currentUser().user._id;

            this.userService.getUserData(userId)
                .subscribe( data => {
                    if (data.obj.profilePicture.uploaded){

                        this.profilePic = '../../images/profile-pictures/' + data.obj.profilePicture.name;
                    }
                })
        }
    }
}

编辑：开发工具的屏幕截图。path 包含图像的路径，但它不显示图像。

编辑 2：开发工具中的网络选项卡

编辑3：这是我的项目结构。我尝试了从'assets/app/images/profile-pictures/' + data.obj.profilePicture.name;til开始的每条道路profile-pictures/' + data.obj.profilePicture.name;。他们都没有工作并显示图片。

标签： angular