How to view image with Angular 2+

Question

I have the code below where I need to display an image coming from the database, the image is coming here as byte how to display this image on the screen?

  <!-- Listar As Bebidas Alcoólicas -->
  <div class="card-columns" *ngIf="bebidasAlcoolicas != null">
    <div class="card" *ngFor="let bebidaAlcoolica of bebidasAlcoolicas">
      <button type="button" class="btn btn-danger" (click)="incluirCarrinhoBebidaAlcoolica(bebidaAlcoolica)">
        <img class="card-img-top" src="bebidaAlcoolica.imagemBebidaAlcoolica" alt="Card image cap">
      </button>
      <div class="card-body">
        <h5 class="card-title text-primary font-weight-bold">{{bebidaAlcoolica.nomeBebidaAlcoolica}}</h5>
        <p class="card-text text-danger">{{bebidaAlcoolica.valorBebidaAlcoolica | currency:'BRL':true}}</p>
      </div>
    </div>
  </div>

Attempt 2:

request-piece.create-Component.ts

    loadImagem(encryptedImage) {
        this.imageData = 'data:image/png;base64,' + encryptedImage;
        this.sanitizedImageData = this.sanitizer.bypassSecurityTrustUrl(this.imageData);
        console.log(this.sanitizedImageData);
    }

standalone.create-Component.html

  <!-- Listar As Bebidas Alcoólicas -->
  <div class="card-columns" *ngIf="bebidasAlcoolicas != null">
    <div class="card" *ngFor="let bebidaAlcoolica of bebidasAlcoolicas">
      <button type="button" class="btn btn-danger" (click)="incluirCarrinhoBebidaAlcoolica(bebidaAlcoolica)">
        <img class="card-img-top" [src]='sanitizedImageData' *ngIf="loadImagem(bebidaAlcoolica.imagemBebidaAlcoolica)" alt="Card image cap">
      </button>
      <div class="card-body">
        <h5 class="card-title text-primary font-weight-bold">{{bebidaAlcoolica.nomeBebidaAlcoolica}}</h5>
        <p class="card-text text-danger">{{bebidaAlcoolica.valorBebidaAlcoolica | currency:'BRL':true}}</p>
      </div>
    </div>
  </div>

Answer 1

Angular has nothing native to render an array of bytes in image. But it can transform an encrypted byte array in Base64 into a rendered image using a directive.

I took the example of Soen, but I gave a good adapted for its use here.

The entire code will be encapsulated in our new directive, ImageBytesDirective.

import {Directive, OnInit, Input} from '@angular/core';
import {Http} from '@angular/http';
import {BROWSER_SANITIZATION_PROVIDERS, DomSanitizationService} from '@angular/platform-browser';

@Directive({
  selector: '[image-bytes]',
  providers: [BROWSER_SANITIZATION_PROVIDERS],
  host: {
    '[src]': 'sanitizedImageData'
  }
})
export class ImageBytesDirective implements OnInit {
  imageData: any;
  sanitizedImageData: any;
  @Input('image-bytes') encryptedImage: string;

  constructor(private http: Http,
              private sanitizer: DomSanitizationService) { }

  ngOnInit() {
    this.imageData = 'data:image/png;base64,' + encryptedImage;
    this.sanitzedImageData = sanitizer.bypassSecurityTrustUrl(imageData);

  }
}

To use simply add the ImageBytesDirective to its component Directives and to:

<img [image-bytes]="bebidaAlcolica.imageBase64" width="100" height="100" />