Angular <img> 有条件的答案

【问题标题】：Angular <img> conditionalAngular <img> 有条件的
【发布时间】：2018-10-02 18:39:56
【问题描述】：

我是 Angular 新手，所以请全面。

我有这个 HTML 代码：

    <div><img src="assets/images/red_no.png"/></div>

我想根据变量是真还是假来选择 src。我试过 ng-src 但不能让它工作。还有 *ngIf 但我似乎无法正确处理模板。

感谢您的回复

【问题讨论】：

您应该向我们展示您对ng-src 和ng-if 的具体尝试
选择或更改src?
您使用的是哪个版本的 Angular？ ng-src 用于 AngularJS，*ngIf 用于 Angular。 AngularJS 和 Angular 是不同的框架。

【解决方案1】：

您可以像这样在属性中添加条件

<div><img [attr.src]="[true? 'assets/images/red_no.png' : '']"/></div>

【讨论】：

【解决方案2】：

在您的 html 中：

<img [src]="this.showImage()">

在您的 .ts 中：

showImage(){
return statement ? 'assets/images/red_no' : '';
}

【讨论】：

【解决方案3】：

使用ternary operator，如下所示：

<img [src]="variable? 'assets/images/red_no.png' : 'assets/images/another.png'" />

【讨论】：