Convert File Object to <img> Angular

user_9014245 0
Viewed 5259

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">
angular typescript file javascript
1 Answers

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.

user_26222920
Related