0

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?

Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333

1 Answers1

1

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%2Fapp%2Fapp.component.ts

Mathew Berg
  • 28,625
  • 11
  • 69
  • 90
  • @jfriend00 no worries. I deleted my answer, not the question. Just clicked on it and it says: "This post is hidden. It was deleted 1 hour ago by the post author." – Mathew Berg Dec 21 '21 at 19:12