我的申請是有效（true）或不活動（！actice）。我想改變我的圖像源的每一個狀態：更改圖片來源Angular2

<img [src]="{'../../resources/images/pause.png':active, '../../resources/images/play.png':!active}"

（？典型布爾值a：VALUEB是不正確的）

代碼運行，但圖像沒有發現。更改路徑沒有幫助。也許你可以...

UPDATE 文件夾結構

來源

2016-11-30 BrianLo

你可以分享你的應用程序的文件夾結構，並且您的瀏覽器嘗試加載IMG路徑？順便說一句，你應該將你的邏輯導出到組件方法中，以獲得更好的可讀性 – soywod

Plunker演示

不要把花括號中的引號""{}並確保路徑是正確的。無論如何，這是你如何去做的。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>{{active ? "Front": "Back"}} of '18 Civic Type R</h2> 
     <label> Toggle Front and Back View 
      <input type="checkbox" name="checkbox" [(ngModel)]="active" /> 
     </label> 
     <br/> 
     <img [src]="active ? frontPath : backPath"> 
    </div> 
    `, 
}) 
export class App { 
    active:boolean = false; 

    frontPath:string = "http://www.topgear.com/sites/default/files/styles/fit_980x551/public/images/news-article/carousel/2016/09/a4705f0aaad0587c653b37b03409b0a0/78932_new_civic_type_r_prototype_breaks_cover_in_paris-1.jpg?itok=Few4WV6D"; 

    backPath:string = "http://tophondacars.com/wp-content/uploads/2018-Honda-Civic-Type-R-pwe.jpg"; 

    constructor() { 

    } 
}

OR

你可以使用*ngIf並且只顯示當你想/隱藏（添加/刪除技術）。

*ngIf

除去或重新創建基於一個{表達式} DOM樹的一部分。

如果分配給ngIf的表達式評估爲虛假值，則將該元素從DOM中移除，否則將該元素的克隆重新插入到DOM中。

<img *ngIf="active" [src]="../../resources/images/pause.png"> 
<img *ngIf="!active" [src]="../../resources/images/play.png">

來源

2016-11-30 16:15:50

非常感謝。第一個解決方案固定它 – BrianLo

好！很高興幫助！ –

這也有幫助： http://stackoverflow.com/questions/39635649/angular2-image-not-showing – BrianLo

更改圖片來源Angular2

回答

Plunker演示

OR

相關問題