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

时间:2018-04-21 11:43:02

标签: javascript angular image

<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)

2 个答案:

答案 0 :(得分:0)

试试这个

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

答案 1 :(得分:0)

我刚刚测试了您的代码,您需要使用[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"
  }