Angular2 - Показать изображение

Question

Я создал приложение Angular2, которое позволяет пользователю загружать изображения. Я хочу реализовать опцию предварительного просмотра. Однако, когда я пытаюсь помешать этому, изображение не появляется. Как мне достичь этой функции?

UploadComponent.ts

import * as ng from '@angular/core'; 
//import { UPLOAD_DIRECTIVES } from 'ng2-uploader'; 
import {UploadService} from '../services/upload.service'; 

@ng.Component({ 
    selector: 'my-upload', 
    providers:[UploadService], 
    template: require('./upload.html') 
}) 
export class UploadComponent { 
    progress:any; 
    logo:any; 
    filesToUpload: Array<File>; 
    constructor(public us:UploadService){ 
     this.filesToUpload = []; 
    } 
    upload() { 
     this.us.makeFileRequest("http://localhost:5000/api/SampleData/Upload", this.filesToUpload) 
     .then((result) => { 
      console.log(result); 
     }, (error) => { 
      console.error(error); 
     }); 
    } 
    onFileChange(fileInput: any){ 
     this.logo = fileInput.target.files[0]; 
    } 
} 

Upload.html

<h2>Upload</h2> 
<input type="file" (change)="onFileChange($event)" placeholder="Upload image..." /> 
<button type="button" (click)="upload()">Upload</button> 
<img [src]="logo" alt="Preivew"> 

Answer 1

, как вы попробуете, вы не получите URL изображения с fileInput.target.files[0], но объект.

Чтобы получить URL изображения, вы можете использовать FileReader (documentation here)

onFileChange(fileInput: any){ 
    this.logo = fileInput.target.files[0]; 

    let reader = new FileReader(); 

    reader.onload = (e: any) => { 
     this.logo = e.target.result; 
    } 

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