显示基于条件的图像

Question

我希望图像标签根据条件显示图像。

我尝试了下面的代码，但没有显示图像

<img src="{{row.image}}!=null?'data:image/jpeg;base64,{{row.image}}':'./assets/img/quill1.png'">

有人可以告诉我我做错了什么。

Answer 1

使用* ngIf有条件地显示元素

<img *ngIf="row.image" [attr.src]="'data:image/jpeg;base64,' + row.image" />
<img *ngIf="!row.image" src="./assets/img/quill1.png" />

编辑：

理想情况下，您将在ts中构建完整的base64 src字符串

编辑2：

属性中条件逻辑的示例：https://stackblitz.com/edit/angular-cfbsid

这不是我推荐的方法，只是一个示例

Answer 2

尝试一下：

<img [src]="row.image?'data:image/jpeg;base64,'+row.image:'./assets/img/quill1.png'">

Answer 3

因此您可以将其分为两个元素：

<img *ngIf="row.image" [src]="'data:image/jpeg;base64,' + row.image" />
<img *ngIf="!row.image" src="./assets/img/quill1.png" />

或者您可以将结果绑定到.ts文件中的get函数：

html：

<img [src]="getImage"/>

ts：

get getImage() {
       return  this.row.image!=null?'data:image/jpeg;base64'+this.row.image:'./assets/img/quill1.png'
}