Question

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

所以我有来自用户对象的src并且我正在更改图像并更新用户模型，但是尽管内容发生了变化，但网址保持不变。

我的更新功能

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 function）

Answer 1

试试这个

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

Answer 2

我刚刚测试了您的代码，您需要使用[src]代替[(src)]。

我在stackblitz＆amp;它运作得很好！

<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"
  }

虽然src内容发生了变化，但图像并没有改变

2 个答案: