如何在Angular 2/Typescript中的假路径中预览图片? [英] How to preview picture stored in the fake path in Angular 2/Typescript?

问题描述

浏览器不使用本地磁盘的完整路径，而是使用假路径将文件名连接起来.有没有办法使用Typescript或angular 2从fakepath访问文件(图像)?

Browsers don't take full path of local disc, instead they concatenate the filename with fakepath. Is there any way to access the file (image) from fakepath using typescript or angular 2?

我有这个:

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

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

where my path variable stores the 'fakepath':"C:\fakepath\pic.jpg" in my .ts file.

修改 此问题讨论了从中预览图像文件的方法使用javascript的fakepath.如果Js有可能，那么在ts的情况下会不一样吗?

Edit This question discusses the way to preview image file from fakepath using javascript. If it is possible with Js, then is it not the same in case of ts?

推荐答案

这应该做您想要的:

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

这篇关于如何在Angular 2/Typescript中的假路径中预览图片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！