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

您应该以不同方式使用Angular 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 2

我发现了问题。这是正确的方法。

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

我使用src={{}}代替src="{{}}"。

Answer 3

我遇到了同样的问题。我的解决方案有点难以改变图​​像的src。
在html中：

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

角度：

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

Answer 4

我能够通过嵌套形式使用一元'IF'来解决此问题

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