如何使用 *ngIf 指令更改图像？

Question

I'm developing an application with the technologies shown below. How can i use *ngIf directive to change an image with another one? I will be more precise in explaining my intentions; I've two images (male symbol ♂ and female symbol ♀), when I've 'gender == M' I have to display male symbol, instead when I've 'gender == F' I have to display feminin symbol. Thanks to everyone!

Technologies that I currently use:

• Ionic 4.10.2
• Angular 6
• 8.1.2 (cordova-lib@8.1.1)
• TypeScript
• Visual Studio Code

Answer 1

you can use like below

<img src="gender == 'M'? 'your image path for male': 'your image path for Female'"/>

using above no need to use ngIf directive

Answer 2

Rather than using images you can go for font awesome icons

<div *ngIf="gender == 'F'; else elseBlock">
  <i class="fa fa-venus" aria-hidden="true">
  </i>
</div>
<ng-template #elseBlock>
  <i class="fa fa-mars" aria-hidden="true">
  </i>
</ng-template>

Answer 3

I solved,

 <img *ngIf="response.gender == 'F'" src="female.png" slot="start" /> <img *ngIf="response.gender == 'M'" src="male.png" slot="start" />