Angular2 dynamische img src

Question

Ich habe den folgenden Code:

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

Laufen meine app Ich sehe das Bild korrekt angezeigt. Ich möchte jedoch, dass sich das Bild ändert, wenn die aktuelle Route aktiv ist. Also habe ich:

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

dies auf der anderen Seite ergibt:

Was ich tue, falsch oder ist das ein Fehler?

Answer 1

Ich habe das Problem gefunden. Dies ist der richtige Weg.

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

Ich war mit src = {{}} anstelle von src = " {{}} ".

Answer 2

Sie sollten Angular 2-Bindungen anders verwenden.

Ihr <img> Tag sein sollte:

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

Beachten Sie die eckigen Klammern um das src Attribut, und die Vorlage Ausdruck zwischen den Anführungszeichen.

Einige Lesung über das Eigentum Bindungen: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding

Answer 3

stieß ich auf mit dem gleichen Problem. Meine Lösung ist ein bisschen schwierig, src des Bildes zu ändern.
In html:

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

In Winkel:

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