Angular2 dynamic img src

Question

I have the following code:

<a routerLink="/dashboard" routerLinkActive="active" #rla="routerLinkActive">
          <img src="/assets/navigation/dashboard-icon-active.svg" />
        <template [ngIf]="!isSmallSidebar">
          Dashboard
        </template>
      </a>

Running my app I see the image displayed correctly. However I want the image to change if the current route is active. So I did:

<a routerLink="/dashboard" routerLinkActive="active" #rla="routerLinkActive">
        <!-- <img
          id="re-nav-dashboard-img"
          src={{ rla.isActive ? './assets/navigation/dashboard-icon-active.svg' : './assets/navigation/dashboard-icon.svg' }} /> -->
        <template [ngIf]="!isSmallSidebar">
          Dashboard
        </template>
      </a>

This on the other hand results in:

What am I doing wrong or is this a bug ?

Code Guru · Accepted Answer · 2018-04-24 05:58:02Z

13

You should use Angular 2 bindings differently.

Your <img> tag should be:

<img id="re-nav-dashboard-img" [src]="rla.isActive ? './assets/navigation/dashboard-icon-active.svg' : './assets/navigation/dashboard-icon.svg'" />

Notice the square brackets around the src attribute, and the template expression between the quotes.

Some reading about property bindings: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding

edited Apr 24, 2018 at 5:58

Code Guru

15.8k31 gold badges147 silver badges214 bronze badges

answered Nov 23, 2016 at 15:21

David M.

2,6391 gold badge17 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Günter Zöchbauer Over a year ago

If the bound value is a string, they are equivalent.

mp3por Over a year ago

what is the difference with my approach ?

David M. Over a year ago

@GünterZöchbauer I wasn't aware but after reading angular.io/docs/ts/latest/guide/… I must agree :)

Günter Zöchbauer Over a year ago

I like when people agree with me :)

Daniel Jacobson · Accepted Answer · 2018-07-31 17:53:44Z

2

I was able to solve it by doing a unary 'IF' in nested form

    <td class="cent">
         <img  [src]="OrdersFund?.status=='P' ? 'assets/P.png' : OrdersFund?.status=='E' ? 'assets/E.png' : 'assets/C.png'" /> 
    </td>

answered Jul 31, 2018 at 17:53

Daniel Jacobson

1711 silver badge3 bronze badges

Comments

Afsun Khammadli · Accepted Answer · 2018-02-16 09:00:06Z

1

I came across with same problem. My solution is a bit tricky to change src of image.
In html:

<div id="imageDiv"></div>

In angular:

document.getElementById('imageDiv').innerHTML = '<img src="' + YourPhotoURLOrBase64String + '"/>';

answered Feb 16, 2018 at 9:00

Afsun Khammadli

2,0684 gold badges19 silver badges28 bronze badges

Comments

Code Guru · Accepted Answer · 2018-04-24 05:58:59Z

1

I found the problem. This is the correct way.

<img id="re-nav-dashboard-img" src="{{rla.isActive ? './assets/navigation/dashboard-icon-active.svg' : './assets/navigation/dashboard-icon.svg'}}" />

I was using src={{}} instead of src="{{}}".

edited Apr 24, 2018 at 5:58

Code Guru

15.8k31 gold badges147 silver badges214 bronze badges

answered Nov 23, 2016 at 12:52

mp3por

1,8723 gold badges24 silver badges37 bronze badges

Collectives™ on Stack Overflow

Angular2 dynamic img src

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related