Updating the Image src in html using Angular2

Question

I'm trying to show the updated the image in my html file but after a lot of efforts no luck. Since in my typescript file the imageUrl is getting updated which I have checked in my console, but the html file is not updating the image.

I have found out from my research that ng-src will serve the solution to the problem but I'm getting this error which is making my task go complex the error is :

Can't bind to 'ng-src' since it isn't a known property of 'img'

Since I have done research again and got to know that this problem would be solved by this

<img [attr.src]="imageUrl"/>

Since this solved my problem as the error went away but when I tried to get the updated result in my , no luck.

HTML

<div class="col-12 col-lg-5 pb-3">
  <img [src]="imageUrl" alt=""/>
</div>

TYPESCRIPT

ngOnInIt(){
  this.currentUser.getUser((user) => {
    console.log("user has been fetched", user)

    if(this.downloadUrl == null || this.downloadUrl == "")
      this.imageUrl = user.image_url;
    else
      this.imageUrl = this.downloadUrl;

    console.log(this.imageUrl);
  })
}

NOTE : In my console the url is actually getting updated but it not getting reflected in my html.

This is my console log :

http://s3.amazonaws.com/nightlightme/users/images/000/000/026/medium/profile_picture_2Fmy_img.jpg?1515500453
profile-page.component.ts:43 Upload is 0% done
profile-page.component.ts:43 Upload is 30.6248714929251% done
profile-page.component.ts:43 Upload is 74.04998224265874% done
profile-page.component.ts:43 Upload is 91.87461447877531% done
profile-page.component.ts:43 Upload is 100% done
profile-page.component.ts:52 https://firebasestorage.googleapis.com/v0/b/nightlight-cfc85.appspot.com/o/profile_picture%2Fmy_dp.jpg?alt=media&token=fa524e3e-2b06-400e-bc21-16f1901c0909

You can see the url the first one is the previous url and now the image url in the last is getting updated. But the image is not getting changed in my html.

Any help would be highly appreciated. Thanks

EDITS

I have done some more research and been to these solutions which some how confused me and wasn't able to figure it out what to do in my typescript file. Basically the need of an hour is to refresh the image only in my typescript file which I've tried doing this via binding but no luck.

Auto refresh the image only in html using Javascript

Tried initializing with the Date so as to get the updated result to be reflected inside the html but no luck.

imageUrl:string= "" + new Date().getTime();

And rest all the code as same. But not getting any result

Sajeetharan · Answer 1 · 2018-01-09T13:44:36.603

0

ng-src is angular1.x syntax, just use src attribute with angular2

<img src="{{imageUrl}}" alt=""/>

alternatively you can do this too,

<img [src]="imageUrl" />

also wrap the condition inside brackets,

if(this.downloadUrl == null || this.downloadUrl == ""){
    this.imageUrl = user.image_url;
}
  else
{
   this.imageUrl = this.downloadUrl;
}

edited Jan 09 '18 at 13:44

answered Jan 09 '18 at 13:40

Sajeetharan

216,225
63
350
396

thanks for the quick reply but I'm not getting the desired result. Forgot to mention but I have tried this earlier and no luck – Alok Jan 09 '18 at 13:41
The url is valid as I'm getting it from the firebase download url. – Alok Jan 09 '18 at 13:44
check the condition – Sajeetharan Jan 09 '18 at 13:45
I have done this, no luck. And I have checked the url too for your convenience and it is correct. Made changes in the condition. But no change. It is showing the image but not changing the image as soon as it gets updated – Alok Jan 09 '18 at 13:47
@Alok, it seems like your condition will only update if downloadURL is null, otherwise you're setting it back to the original url. Maybe you should set imageUrl and downloadUrl to null before you upload then it will get set in your condition. – Farasi78 Jan 09 '18 at 14:52
@Farasi78, I have initialized both the imageUrl and downloadUrl as this "". And after that I'm trying hard to get the result but I'm not getting anything – Alok Jan 09 '18 at 16:48
@Alok, its hard to know where the error is given the code you have shared. Have you tried initializing this.imageUrl in ngOnInit? it might help you. – Farasi78 Jan 09 '18 at 19:33
@Farasi78 I have checked it in . my code. Thanks for the help. I think I know where I'm committing mistake. **BTW the typescript code which you can see is present inside the ngOnInIt() only.** – Alok Jan 10 '18 at 07:35

Updating the Image src in html using Angular2

1 Answers1