I'm trying to render an image which I have converted to base64

data:image/vnd.microsoft.icon;base64,AAABAAIAICAAA.....

Now, whatever I do, I always get

{
     changingThisBreaksApplicationSecurity: 'data:image/vnd.micr.....
}

DEMO

So, in my search people suggest to use bypassSecurityTrustUrl or bypassSecurityTrustResourceUrl, but both produce the same result. I've also seen people suggesting

<img src="{{base64}}">

But this is no different than <img [src]="....">, it produces

<img src="unsafe:data:image/vnd.microsoft.icon;base64,AAABA....">

(Note the unsafe at the beginning)

And I have seen suggestions to use

<img [src]="safeUrl.changingThisBreaksApplicationSecurity">

But this doesn't feel right.

Any suggestion how to properly render this base64 image?

CodePudding user response：

I opened up your demo and there's a few things that jump out at me

1. Your base 64 is double quoted: '"..."' so you should remove the "'s or the ''s.
2. You're seeing { changingThisBreaksApplicationSecurity: ... } because you have console.log(this.url)
3. Your dom should look like this: <img [src]="url" />

Making all 3 of those changes shows the image correctly and there's nothing in the errors/etc...: https://stackblitz.com/edit/angular-ivy-uxhrr2?file=src/app/app.component.ts