How to display image with Angular 2+

Question

How to display image with Angular 2+

Navigation

#1 by (0 votes)

0

I have the code below where I need to display an image coming from the database, the image is coming here as a 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-avulso.create-component.ts

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

request-avulso.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>

angular

asked by anonymous 25.02.2018 / 20:37

1 answer

Pass activity variable to javascript function in webview Android Process XML with specific formatting in webservice asmx

score 0 · Answer 1

Angular has nothing native to render an array of bytes in image. But it can turn a base64-encrypted array of bytes into a rendered image using a directive.

I took the example from SOen , but I gave a good fit for your 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 just add the ImageBytesDirective to the directives of your component and do:

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