Convert File Object to <img> Angular

Question

In an Angular Component, I have a File like this and its an image:

public file : File;

How to show the image on HTML template, something like this:

<img [src]="file"> 

Answer 1

Use FileReader's instance's readAsDataURL method and pass it a File. It has an onload property to which you can assign a handler function. This will be called with event once the input file is read. The event's target.result property will have an encoded URI which you can then use as the image source.

This is how it translates to code

In your Component Class:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  url;

  onChange(event) {
    var reader = new FileReader();

    reader.onload = (event: any) => {
      this.url = event.target.result;
    };

    reader.onerror = (event: any) => {
      console.log("File could not be read: " + event.target.error.code);
    };

    reader.readAsDataURL(event.target.files[0]);

  }

}

And in template:

<input type="file" (change)="onChange($event)">

<img *ngIf="url" [src]="url">

---

Here's a Working Sample StackBlitz for your ref.