Angular2ダイナミックのIMG SRC

Question

私は、次のコードを持っている：

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

が私のアプリを実行すると、私は画像が正しく表示され参照してください。しかし、現在のルートがアクティブであれば、イメージを変更したい。だから私はやった：における一方の結果に

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

この：

は私が間違って何をやっているか、これはバグでしょうか？

Answer 1

問題が見つかりました。これは正しい方法です。

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

Iは、Src = {{}}代わりSRCの= " {{}} "を用いました。

Answer 2

角度2のバインディングを別に使用する必要があります。

あなた<img>タグは次のようになります。

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

お知らせsrc属性の周りの角括弧、および引用符の間にテンプレート式。プロパティのバインディングに関する

いくつかの読書：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding

Answer 3

は、私は同じ問題に出くわしました。私の解決策はイメージのsrcを変更するのはややこしいことです。 HTMLで
：角度で

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

：

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