how to insert base64 string to image src in angular

Question

in my config.ts,

export const imageBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiAAA...."

in my conmonent.ts


import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { imageBase64 } from './config'
...
  myImg: SafeUrl; 
  constructor(private sanitizer: DomSanitizer){
     this.myImg= this.sanitizer.bypassSecurityTrustUrl(imageBase64 );
  }

in my html

<img [src]="myImg" alt="" />

unfortunately, this fail, error message net::ERR_INVALID_URL

then i use bypassSecurityTrustResourceUrl fail too, What's wrong with that?

Is imageBase64 is valid data? bcs your code is just working fine in jsfiddle stackblitz.com/edit/… with correct base 64 data — Ramesh Rajendran
– Ramesh Rajendran, Commented Jan 6, 2020 at 4:45

Vignesh Ammasi · Accepted Answer · 2020-01-06 05:25:22Z

2

We don't need to sanitize the base64 data. We can use string interpolation to show whatever the data we have in the form of string

<img src={{ imageBase64}} alt="" />

answered Jan 6, 2020 at 5:25

Vignesh Ammasi

4011 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

deepthan Over a year ago

thanks a lot, the base64 data was wrong lead to an error, and don't need to sanitize the base64 data.

MadaManu · Accepted Answer · 2020-01-06 04:17:46Z

0

You could use interpolation: src={{myImg}}

See below jsFiddle to help out:https://jsfiddle.net/Lt7aP/4/

answered Jan 6, 2020 at 4:17

MadaManu

6764 silver badges10 bronze badges

Comments

Sachila Ranawaka · Accepted Answer · 2020-01-06 04:24:20Z

0

Use get property to return url

public get myImg(): string {
  return this.sanitizer.bypassSecurityTrustUrl(imageBase64 );
}

answered Jan 6, 2020 at 4:24

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Comments

MonkeyScript · Accepted Answer · 2020-01-06 05:04:06Z

0

Works fine. Try the demo and find where you went wrong.

<img [src]="imageBase64" alt="">

Demo : https://stackblitz.com/edit/angular-rzjusl

edited Jan 6, 2020 at 5:04

answered Jan 6, 2020 at 4:46

MonkeyScript

5,1611 gold badge14 silver badges28 bronze badges

Collectives™ on Stack Overflow

how to insert base64 string to image src in angular

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related