reactivos - tablas angular 4

¿Cómo obtener una vista previa de la imagen almacenada en la ruta falsa en Angular 2/Typescript?

Question

Los navegadores no toman la ruta completa del disco local, sino que concatenan el nombre de archivo con el camino falso. ¿Hay alguna forma de acceder al archivo (imagen) desde fakepath utilizando mecanografiado o angular 2?

Tengo esto:

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

donde mi variable de ruta almacena ''fakepath'': "C: / fakepath / pic.jpg" en mi archivo .ts.

Editar Esta pregunta discute la forma de obtener una vista previa del archivo de imagen de fakepath usando javascript. Si es posible con Js, ¿no es lo mismo en el caso de ts?

Answer 1

Agregando a @ GünterZöchbauer respuesta, esto no estaba funcionando para mí hasta que agregué esto:

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

Antes de agregar ''cualquiera'', obtenía el error:

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

Answer 2

Funciona cuando cambias el evento al tipo de cualquiera. De esa forma, Angular puede acceder a cualquiera de sus propiedades.

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

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

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

}

Answer 3

Esto debería hacer lo que quieras:

<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:any) => {
      this.url = event.target.result;
    }

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