MEAN堆栈应用程序:我无法显示我的图像

时间:2018-03-25 15:31:36

标签: angular image typescript

所以我正在开发一个MEAN堆栈电影应用程序。所以我上传了一张图片并在我的数据库中保存了一个引用(例如'1521991102156.png')。

现在,当我加载页面时,我想要显示此图像,但我只是不知道要添加到我的img图像中。到目前为止我尝试的所有东西似乎都没有用。有人知道怎么做吗?

这是我的模板:当没有上传个人资料图片时,它允许用户首先执行此操作,否则它只显示个人资料图片。但是这张照片没有显示在这里。

<div class="profilePicSection">
        <div *ngIf="!user?.profilePicture.uploaded; else profilePic" class="form-group">
            <label for="file">Choose File</label>
            <input type="file"
                   id="file"
                   (change)="handleFileInput($event.target.files)">
        </div>
        <ng-template #profilePic>
            <img [src]="profilePicLink" alt="heyho">
        </ng-template>
    </div>

这是组件:当我打开页面时,我尝试在数据库中获取配置文件图片文件的名称并将其输入到链接中。我在这方面取得了成功,但它没有显示图片,所以我认为我的道路有问题。

ngOnInit() {
        this.authService.getUserStatistics(localStorage.getItem('userId'))
            .takeUntil(this.ngUnsubscribe)
            .subscribe(result => {
                console.log(result.user);
                this.statistics = result.statistics;
                this.user = result.user;
                this.profilePicLink = '/assets/app/uploads/' + result.user.profilePicture.name
            });
    }

这是我正在使用的应用程序的结构:

enter image description here

0 个答案:

没有答案