Angular 2 ERROR with show image

Question

I want to show a image in my code. The image has been saved in text format in my database. I convert the string of image in image with the following line code:

 <img [src]="'data:image/png;base64,'+zona?.fotografia">

I succeed to show the image in the page, but in the console there are the following errors:

WARNING: sanitizing unsafe URL value data:image/png;base64
GET unsafe:data:image/png;base64, net::ERR_UNKNOWN_URL_SCHEME

If i have seen the possible solution for the warning, i didn't understand the other error..

Suren Srapyan · Accepted Answer · 2017-09-21 12:11:05Z

1

You need to ensure your application that this is an safe url. So you can do it via DomSanitizer service. Inject it into your component and use bypassSecurityTrustUrl method.

this.fotografia= this.sanitizer.bypassSecurityTrustUrl(`data:image/png;base64,${this.zona?.fotografia}`)

and use it in the <img [src]="fotografia">

answered Sep 21, 2017 at 12:11

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

1 Comment

Cristian Annicchiarico Over a year ago

I have followed your suggestion and there aren't error, but there is a new error: GET localhost:4200/null 404 (Not Found)

Collectives™ on Stack Overflow

Angular 2 ERROR with show image

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related