Angular 4 refresh <img src={{ ... }} > when the value changes

Question

I am using Angular 4 and I have a component where I want to change my user current photo.. so the html code that displays the current user photo is this..

<div class="profilphoto">
        <img src= {{currentphoto}}>
</div>

currentphoto contains the current user photo url and I get it from firebase.. After that I display a Gallery of photos so the user can select one and change his profil photo using a form.. the submit code is the following and works fine

    onSubmit = function(form) {
    this.photoUrl = form.photoUrl;
    firebase.database().ref("users/"+this.authService.cusername+"/photo").update({
      url: form.photoUrl
    }).then(()=>{
      this.currentphoto = this.authService.photourl;
      console.log("currentphoto:"+this.currentphoto);
    }
    );
  }

Everything works fine except that despite the currentphoto value has changed and database url upadated the html still displays the previous user's image and its annoying(if I refresh the page it shows the new profil image).. Is there any way I can make

<div class="profilphoto">
        <img src= {{currentphoto}}>
</div>

detect when currentphoto changes value and Display the image with the new src value??

Solution 1

Try calling the changedetection manually,

constructor(private cdRef: ChangeDetectorRef){

}

Once you set the image

 this.currentphoto = this.authService.photourl;
 this.cdRef.detectChanges();

Solution 2

This is probably not relevant anymore but in case it could help people get this solved faster, here it is.

If you want to update the image after it has changed write your src like this:
src='{{currentphoto}}?d={{clock_tick}}'

Initialize your clock tick when you first load your component (I use Date.now()) and again after you update the image. This will tell your browser that you updated the image and it will reload it for you.

It worked for me.

Solution 3

Without the entire code of your component/service is hard to know what is the problem, but the best shot is in this line:

onSubmit = function(form) {

probably it's a problem with the 'this' value. Insert a console.log(this) below this line (inside the function) and check if 'this' is a reference to the component instance or to the window.

Try to use arrow function:

onSubmit = form => {
 //do what you need here, call the service, etc...
 //and then set the this.currentphoto
}

Comments

[jonrsharpe]

Shouldn't that be [src]="currentphoto"?

[Christian Benseler]

Does 'currentphoto' have a new value? If the value is the same (in other words, the image changes but the url keeps the same) you will have to add a random number to the url, as query string. such like stackoverflow.com/questions/17394440/…

[Ben]

I have had the same problem as OP and can confirm that this solution solves it. My question is will there be a fix in Angular at any point, or is this the desired behaviour?

[Ben]

Actually, I also had to add a random number as mentioned by Christian's comment above and explained in stackoverflow.com/questions/17394440/…. This brings up the issue of random number collisions, which leads to the question if there is a better solution?

[LosManos]

It should work but does not. Don't know why. Angular 10.

[Vikram Sapate]

both src= {{currentphoto}} & [src]="currentphoto" are same so, in either case, it'll not work. Please see my answer.