获取图片的相对路径

Question

我创建了一个 Angular 4 应用程序。我想在我的计算机上获取一张图片（不好，但暂时）并使用相对路径进行调用。

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


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

但是我有一个安全问题，知道为什么，我该怎么办？

谢谢！

Answer 1

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

在您的组件中：

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]);
  }
}

发件人：How to preview picture stored in the fake path in Angular 2/Typescript?