How to display image in angular 9

 

Browse with default image in a form

After select image display View in a form

image.component.html

<div class="col-md-2 form-group"> <input type="file" class="form-control" #Image accept="image/*" (change)="handleFileInput($event.target.files)" required> </div> <div class="col-md-1 form-group"> <img [src]="imageUrl" style="width: 50px; height:50px;border:1px solid #f60;" /> </div>

image.component.ts

export class ImageComponent implements OnInit { imageUrl: string = "/assets/img/default-img.png"; fileToUpload: File = null; constructor() { }

handleFileInput(file: FileList) { this.fileToUpload = file.item(0); // Show image Preview var render = new FileReader(); render.onload = (event: any) => { this.imageUrl = event.target.result; } render.readAsDataURL(this.fileToUpload); }

assets --> img (folder Name)--> default-img.png 

Browse with default image in a form

After select image display View in a form