show the image based on a condition

Question

I want the image tag to show the image depending on a condition.

I tried the below code but it is not showing me the image

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

Can someone tell what is that i am doing wrong.

this logic should be wraped inside ts file not HTML! src tag is responsible to display the image either it should base64 or physical paht — Prashant Pimpale, Feb 10 '20 at 11:36
yes and it will work! but it will not easy to maintain and keep the code clean! — Prashant Pimpale, Feb 10 '20 at 11:39

Kurt Hamilton · Answer 1 · 2020-02-10T11:37:47.200

1

Use *ngIf to conditionally show elements

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

Edit:

And you would ideally build the full base64 src string in your ts

Edit 2:

Example of conditional logic in attributes: https://stackblitz.com/edit/angular-cfbsid

This is not my recommended approach, just an example

edited Feb 10 '20 at 11:37

answered Feb 10 '20 at 11:36

Kurt Hamilton

12,490
1
24
40

i have seen few examples where we can do in this way so wanted to check if that is possible – Harsha Mullangi Feb 10 '20 at 11:37
It is possible to use conditional logic, but I wouldn't say it's better. Example of conditional image url: https://stackblitz.com/edit/angular-cfbsid – Kurt Hamilton Feb 10 '20 at 11:41
What you are saying is `ternary` operator and using that on `html`. – Mridul Feb 10 '20 at 11:46
@Mridul not particularly nice, but is possible – Kurt Hamilton Feb 10 '20 at 11:52
@KurtHamilton, i know both the ways just saying what he's trying to refer. – Mridul Feb 10 '20 at 11:56

score 0 · Answer 2 · answered Feb 10 '20 at 11:57

So you can split this into two elements:

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

or you can bind the result to a get function in your .ts file:

html:

<img [src]="getImage"/>

ts:

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

souravmsh · Answer 3 · 2020-02-10T14:54:41.107

You can try this.

Sometimes browser does not support the untrusted URL that is the reason you should use bypassSecurityTrustUrl due to security issues. You can see the documentation https://angular.io/api/platform-browser/DomSanitizer

component.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">

Or

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

Or

<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>

show the image based on a condition

3 Answers3