Angular 2 change image src attribute

Question

Assuming I have the following code:

<img [src]="JwtService.characterImage(enemy)" 
        class="{{enemy.status}}"
    (click)="sidenav.toggle();" style="cursor:pointer">

How I can change this img src asttribute from my components .ts file?

score 16 · Accepted Answer · answered Jul 12 '16 at 16:11

16

Add a imgSrc in your component

class Component {
 constructor(jwtService: JwtService) {
     this.imgSrc = JwtService.characterImage(enemy);
 }
}

<img [src]="imgSrc" 
        class="{{enemy.status}}"
    (click)="sidenav.toggle();" style="cursor:pointer">

answered Jul 12 '16 at 16:11

Piyush.kapoor

6,715
1
21
21

1

I was wondering if there is any way to access the img `src` attribute without declaring a new variable – TheUnreal Jul 12 '16 at 16:18
is it possible to change img src using reference on change event of radio button in Angular2 not in .ts file? @Piyush – MeVimalkumar Jan 30 '18 at 06:15
@Piyush.kapoor what if img tag in ngFor and I need get image from server by passing name of the file – MeVimalkumar May 21 '18 at 09:45

score 3 · Answer 2 · answered Feb 03 '17 at 17:40

3

You could pass a reference of your tag using $event and change it's attribute from your typescript code.

<img (click)="functionInTypeScript($event.target)">

Or if you want to change something in image tag on another event you could do it like this

<img #image>
<button (click)=functionInTypeScript(image)>

and then simply access in typescript code like this

functioninTypeScript(image:any) {
   image.src='path to new image';
}

answered Feb 03 '17 at 17:40

Rahul Kumar

5,120
5
33
44

1

This is not correct. With #image you get an ElementRef object, not a direct access to the DOM object ... but of course, the ElementRef has a "nativeElement" property as an accessor to the DOM object. So, it would be: image.nativeElement.src = "path to new image"; – flackjap Jun 28 '17 at 21:07

Vishnu Kant · Answer 3 · 2017-07-17T05:59:58.503

3

Typescript:

getImage(image: any, time: string) {
    const t1 = '06:00';
    const t2 = '18:00';
    if (time >= t1 && time < t2) {
      return ('/images/morning.png');
    } else {
      return ('/images/evening.png');
    }
  }

HTML :

  <img [src]="getImage(this,bettrainList.departureTime)" width="25">

edited Jul 17 '17 at 05:59

answered Jul 17 '17 at 05:52

Vishnu Kant

31
3

Angular 2 change image src attribute

3 Answers3

Linked

Related