盡管src內容更改，但圖像未更改

Question

<img [(src)]="user.photo_url" alt="profileImage">

所以我有來自用戶對象的src，並且我正在更改圖像，並且用戶模型已更新，但是url保持不變，盡管內容發生了變化。

我的更新功能

this.appService.uploadProfileImage(this.user._id, this.imageFormData).then((response: any) => {
      this.user = response;
    });

因此the user.photo_url="somr-url"保持不變，但是路徑上的圖像發生了變化。

但是它沒有反映在UI上。

因此，當更新src時如何在img上反映更改。

我嘗試過但沒有奏效的事情。

• 雙向綁定（如圖所示）
• ChangeDetectorRef（detectChange函數）

Answer 1

嘗試這個

 <img src="{{user.photo_url}}" alt="profileImage">

Answer 2

我剛剛測試了您的代碼，您需要使用[src]而不是[(src)] 。

我在stackblitz中做了一個小演示，效果很好！

<button (click)="changeImg()">change image source</button>
<br>
<img [src]="img" alt="profileImage">

ts代碼：

 state : boolean;
  img: string;

  changeImg() {
    this.state = ! this.state;
    this.img =  this.state ? "https://image.freepik.com/free-photo/blue-sky-with-clouds_1232-936.jpg" : "https://blogs.qub.ac.uk/queensuniversitybelfast/files/2015/05/red-sky.jpg"
  }