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

Question

我有一个角形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中重新加载图像？我应该重新加载页面/路由，还是以其他方式重新加载？使用区域会有帮助吗？

Answer 1

您必须更改src以重新加载。解决方案之一是将随机字符串添加到url的末尾。

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