Comment prévisualiser une image stockée dans le faux chemin d'accès dans Angular 2 / Typescript?

Question

Les navigateurs qui ne prennent pas de chemin d'accès complet du disque local, au lieu de cela ils concaténer le nom de fichier avec fakepath. Est-il possible d'accéder au fichier (image) de l'fakepath à l'aide de la machine ou angulaire 2?

J'ai ceci:

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

d'où ma variable de chemin d'accès des magasins de la "fakepath':"C:\fakepath\pic.jpg" dans mon .fichier ts.

Modifier Cette question traite de la façon de fichier d'image d'aperçu de fakepath à l'aide de javascript. Si cela est possible avec Js, alors n'est-il pas le même dans le cas de ts?

Answer 1

Cela devrait faire ce que vous voulez:

 <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

En ajoutant à la réponse @ GünterZöchbauer, cela ne fonctionnait pas pour moi tant que je n’ai pas ajouté ceci:

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

Avant d’ajouter «any», j’obtenais l’erreur:

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

Answer 3

Cela fonctionne lorsque vous modifiez l'événement en un type quelconque. De cette façon, Angular peut accéder à n’importe laquelle de ses propriétés.

 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 4

Ça marche

example.component.html

 <input type="file" (change)="onFileChanged($event)" required />
<img [src]="imageShow" height="200"> <br/>
 

example.component.ts

 imageShow: any= '';
onFileChanged(event) {
  this.file = event.target.files[0]
  var reader = new FileReader();
  reader.readAsDataURL(event.target.files[0]);
  reader.onload = (event) => {
   this.imageShow = (<FileReader>event.target).result;
 }
 

}