我的申请是有效（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

相关问题