Plunker演示

Question

我的应用程序是活动（true）或非活动（！actice）。我想更改每个州的图像来源：

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

（典型的布尔值？valueA：valueB 不正确）

代码正在运行但未找到图像。改变路径没有帮助。也许你可以......

UPDATE 文件夹结构

Answer 1

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

基于{expression}删除或重新创建DOM树的一部分。

如果分配给ngIf的表达式求值为falsy值，则从DOM中删除该元素，否则将该元素的克隆重新插入DOM中。

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

在条件Angular2上更改图像源

1 个答案:

Plunker演示

OR