如何在Angular 2/Typescript中预览存储在假路径中的图片？

Question

浏览器不采用本地光盘的完整路径,而是将文件名与伪路径连接起来.有没有办法使用typescript或angular 2从伪路径访问文件(图像)？

我有这个:

<img src="{{path}}" />

我的路径变量在我的.ts文件中存储'fakepath':"C:\ fakepath\pic.jpg".

编辑 此问题讨论使用javascript从fakepath预览图像文件的方法.如果有可能与Js,那么在ts的情况下它是不一样的吗？

Answer 1

这应该做你想要的:

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

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

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

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

Answer 2

添加到@GünterZöchbauer回答,这对我来说不起作用,直到我添加了这个:

reader.onload = function(e:any){
   this.url = e.target.result;
}

在添加'any'之前,我收到了错误:

property 'result' does not exist on type 'eventtarget'