获取相对路径的图片

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?