角度：从后端检索用户数据后显示个人资料图片

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;到profile-pictures/' + data.obj.profilePicture.name;的所有道路。他们都不工作并显示图片。