Angular 根据条件显示图像

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

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

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

---

有人能说出我做错了什么吗

使用*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：

属性中的条件逻辑示例：

---

这不是我推荐的方法，只是一个示例，因此您可以将其分为两个元素：

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

ts:

你可以试试这个

有时浏览器不支持不受信任的URL，这是由于安全问题而应使用绕过安全信任URL的原因。您可以查看文档

组件。ts

import { DomSanitizer } from '@angular/platform-browser'; 

constructor(private xss: DomSanitizer) {}

safeURL(url: string): any {
    return this.xss.bypassSecurityTrustUrl(url);
}

component.html

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

或

或

此逻辑应该封装在ts文件中，而不是HTML！src标记负责显示图像，它应该是base64，或者是physical pahtI在html文件中看到的一些示例是的，它会工作！但是维护和保持代码的整洁并不容易！我见过几个例子，我们可以这样做，所以我想检查一下这是否可能，是否可以使用条件逻辑，但我不会说它更好。条件图像url的示例：您所说的是

三元

运算符，在

html

@Mridul上使用它不是特别好，但是possible@KurtHamilton，我知道这两种方法，只要说出他想说的话。

import { DomSanitizer } from '@angular/platform-browser'; 

constructor(private xss: DomSanitizer) {}

safeURL(url: string): any {
    return this.xss.bypassSecurityTrustUrl(url);
}

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

<img [src]="safeURL('data:image/jpeg;base64,'+row.image)" onError="this.src='/assets/img/quill1.png'" alt="Avatar">   

<img *ngIf="row.image; else noAvatar;" [src]="safeURL('data:image/jpeg;base64,'+row.image)" alt="Avatar"/> 
<ng-template #noAvatar>
  <img [src]="'./assets/img/quill1.png'" alt="No Avatar">
</ng-template>