0

I create an Angular 4 application. I would like to get a picture that is on my computer (not good but temporary) and call with a relative path.

this.avatar = 'C:/Users/....../images/picture.png';


<img [src]="avatar" class="user-img"/>

But I have a security problem, do know why and what can I do ?

enter image description here

Thanks !

Vivien Touly
  • 79
  • 2
  • 11

1 Answers1

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

In your component:

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

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

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

From: How to preview picture stored in the fake path in Angular 2/Typescript?

Maxi
  • 61
  • 3