服务器上传后Angular2更新映像[src]

Question

我有一个Angular 2应用程序。 它有一个组件，允许用户裁剪图像并将其上传到服务器。 父组件在src标记中显示图像。 我需要能够在上传更新的图像后更新此src标记。 src标记中的链接将始终相同。 手动刷新浏览器后，我会看到新上传的图片。

这是我在HTML中的图片。 URL在组件中定义...

<img  [src]="url" />

父组件托管图像上传组件，如此......

<imageUploadCropper [postUrl]="postimageProfileUrl"></imageUploadCropper>

图片上传组件将上传图像......

    const formData = new FormData();
    formData.append("uploadedImage", this.data.image);

    this._http.post(this.postUrl, formData, { headers: headers })
        .subscribe();

如何在Angular2中重新加载图像？ 我应该以另一种方式重新加载页面/路由吗？是否会以某种方式使用Zones？

Answer 1

您必须更改src才能重新加载。其中一个解决方案是将随机字符串添加到网址的末尾。

this._http.post(this.postUrl, formData, { headers: headers })
    .subscribe(() => this.url += '?random+\=' + Math.random());