Bildquelle wechseln bei Bedingung Angular2

Question

Meine Anwendung ist entweder aktiv (wahr) oder inaktiv (! Actice). Ich möchte für jeden Zustand meine Bildquelle ändern:

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

(? Typische boolean WertA: WertB ist nicht korrekt)

Der Code ausgeführt wird, aber die Bilder nicht gefunden . Das Ändern des Pfades hat nicht geholfen. Vielleicht können Sie ...

UPDATE Ordnerstruktur

app | +--components | | | +--header (html, ts,...) | +--resources | | | +--images (png)

Answer 1

Plunker Demo

nicht die geschweiften Klammern {} in Anführungszeichen setzen Sie "" und stellen Sie sicher, dass die Pfade korrekt sind. Entweder so würden Sie es tun.

@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

könnten Sie *ngIf verwenden und zeigen nur/auszublenden (hinzufügen/entfernen technisch), wenn Sie wollen.

*ngIf

verlieren bzw. neu erstellt, einen Teil des Baums DOM basierend auf einem Ausdruck {}.

Wenn der Ausdruck, der ngIf zugewiesen ist, einen Falsy-Wert ergibt, wird das Element aus dem DOM entfernt, andernfalls wird ein Klon des Elements in das DOM eingefügt.

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