Angular2 업데이트 이미지 [src] 서버 업로드 후

Question

저는 Angular 2 앱이 있습니다. 사용자가 자르고 이미지를 서버로 업로드 할 수있는 구성 요소가 있습니다. 상위 구성 요소는 src 태그의 이미지를 표시합니다. 업데이트 된 이미지가 업로드되면이 src 태그를 업데이트 할 수 있어야합니다. src 태그의 링크는 항상 동일합니다. 브라우저를 수동으로 새로 고침하면 새로 업로드 된 이미지가 표시됩니다.

여기 내 HTML 이미지가 있습니다. URL은

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

이미지 업로드 컴포넌트

그래서 같은 이미지를 업로드합니다 ...

<img [src]="url" /> 

부모 구성 요소는과 같이 이미지 업로드 구성 요소를 호스팅하는 ... 구성 요소에 정의되어 있습니다 ...

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

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

이미지를 각도 2로 다시로드하려면 어떻게해야합니까? 방금 ​​페이지/경로를 새로 고치거나 다른 방법으로 다시로드해야합니까? 어떻게 영역을 사용하면 도움이 될까요?

Answer 1

src을 다시로드해야합니다. 솔루션 중 하나는 임의의 문자열을 URL 끝에 추가 할 수 있습니다.

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