CODEWITHSUNDEEP
node.jsangular
neetz
neetz

Reputation: 21

B64 image is not displayed in angular

I want to display B64 image string in angular. When i put the static image string it is displayed but when image is dynamic then it shows some problem Below is my component.ts code

      this.Socket_io = socketIo('http://192.168.0.109:3011');
      this.Socket_io.on('echo', (obj) => {

      var a = JSON.parse(obj)

      this.img = a.image_path;

      this.image_path = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,'  
      + this.img);

Below is my html

     <img [src]="image_path">

Image string is being shown in html but it is not displayed

B64 string coming as

Upvotes: 1

Views: 208

Answers (3)

dannybucks
dannybucks

Reputation: 2355

Try this:

<img src="{{'data:image/jpg;base64,' + image_path}}" />

Upvotes: 1

Santosh Shinde
Santosh Shinde

Reputation: 1212

Try like this 

<img [src]="image_path">

here is stackblitz https://stackblitz.com/edit/angular-view-image?file=src/app/app.component.html

Upvotes: 1

Zubayer Bin Ayub
Zubayer Bin Ayub

Reputation: 310

 You can try this

    import { DomSanitizer } from '@angular/platform-browser';
    export abstract class AppComponentBase {

        sanitizer: DomSanitizer;
    }
        constructor(injector: Injector) {
         this.sanitizer = injector.get(DomSanitizer);
    }
        sanitize(image_path: string) {
            return this.sanitizer.bypassSecurityTrustUrl(image_path);
        }

Upvotes: 0

Related Questions