How can I display an image using Typescript and Angular 4

Question

I am very new to typescript and web development in general so I am sorry if my code is terrible. Anyways, I am having an issue displaying a \"preview image\" for a profile p

Answer 1

Template :

<input type='file' (change)="readUrl($event)">
<img [src]="url">

Component :

 readUrl(event:any) {
      if (event.target.files && event.target.files[0]) {
          var reader = new FileReader();

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

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

T tried it, and it works without any error.

Answer 2

You achive this by this simple function :

Template :

<img [src]="url" height="200"> <br/>
<input type='file' (change)="onSelectFile($event)">

Component :

onSelectFile(event) { // called each time file input changes
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => { // called once readAsDataURL is completed
        this.url = event.target.result;
      }
    }
}

Here is the working example of it, please check this out:

WORKING DEMO