각 2/유형 설명서의 가짜 경로에 저장된 사진을 미리 보는 방법

각 2/유형 설명서의 가짜 경로에 저장된 사진을 미리 보는 방법

브라우저는 로컬 디스크의 전체 경로를 택하지 않고 파일 이름을 가짜 경로와 연결한다.형식이나 각도 2를 사용하여 가짜 경로에서 파일(이미지)에 접근할 수 있는 방법은 없는가?

난 이걸 가지고 있다:

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

여기서 내 경로 변수는 내 .ts 파일에 'fakepath':"C:\fakepath\pic.jpg"를 저장한다.

편집 이 질문은 Javascript를 사용하여 가짜 경로에서 이미지 파일을 미리 보는 방법에 대해 설명한다.Js와 함께 가능하다면 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]);
  }
}

@GünterZöchbauer 대답에 덧붙여, 이것은 내가 다음과 같이 덧붙일 때까지 나에게 효과가 없었다.

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

'anyone'을 추가하기 전에 다음과 같은 오류가 표시되었다.

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

이벤트를 다른 유형으로 변경할 때 작동한다.그런 식으로 앵글은 그 어떤 재산에도 접근할 수 있다.

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

}

그건 효과가 있다.

예제.component.properties

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

예제.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;
 }

}

참조URL: https://stackoverflow.com/questions/39074806/how-to-preview-picture-stored-in-the-fake-path-in-angular-2-typescript