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">
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With