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"> 

Brimmer

Is your file an image? – Disclosure

yes it is @artemArkhipov – Brimmer

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.

Zeeba

This is the most succint, easy to follow answer. THank you <3. – Delhi

Answer 2

According to the MDN web docs, you can call URL.createObjectURL().

Adapting @SiddAjmera's answer, we can do:

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

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

  onChange(event) {
    // business logic here...
    this.url = URL.createObjectURL(event.target.files[0])
  }
}

However this approach requires extra care, since it keeps the loaded image in memory. Once you're done with the file you should manually realease the resources via URL.revokeObjectURL(this.url), or you may run into memory leak issues (refer to this question).

Also, according to the docs:

browsers will release object URLs automatically when the document is unloaded

I have not tested what I'm about to say, but I have a feeling if you deploy your code using Client-Side Rendering (CSR) you are more likely to run into memory leak territory, since the page doesn't refresh when you navigate through the site. It's simply JS changing the DOM.

Spreadeagle