如何在Angular 2/Typescript中預覽存儲在假路徑中的圖片？

瀏覽器不採用本地光盤的完整路徑，而是將文件名與虛假路徑連接起來。有沒有辦法使用typescript或angular 2從fakepath訪問文件（圖像）？如何在Angular 2/Typescript中預覽存儲在假路徑中的圖片？

我有這樣的：

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

在我的路徑變量存儲 'fakepath'：在我的.ts文件：「\ fakepath \ pic.jpg C」。

編輯 This問題討論了使用javascript從fakepath預覽圖像文件的方式。如果Js有可能，那麼在ts的情況下是不是一樣？

來源

2016-08-22 Karan Desai

我不明白的問題。這個Angular或打字稿如何相關？ –

您鏈接的問題沒有被接受的答案。另外，其他問題還討論了*上傳文件並顯示上傳文件的路徑。你還有一個上傳的文件，或者你想直接從本地光盤上顯示文件嗎？ –

這應該做你想要什麼：

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

來源

2016-08-22 08:53:48

謝謝。這工作得很好。你能解釋一下代碼中發生了什麼嗎？你看我對JavaScript和打字稿是新手，這些代碼的語法有點壓倒性。 –

很高興聽到。學到了新東西。從未聽說過假路徑。 –

@GünterZöchbauer這不起作用，我不知道它的發佈版本。我在Angular 2.3.1上，它在這一行中出錯：this.url = event.target.result;當我在reader.onload方法中添加控制檯日誌時，我得到：{ 「isTrusted」：true } – user875139

添加到@GünterZöchbauer答案，這不是爲我工作，直到我說這個：

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

之前添加「任何」，我得到的錯誤：

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

來源

2017-01-26 22:25:02 user875139

不太可能此代碼將起作用。函數（e：any）{'應該是（e：any）=> {否則'this'不會指向包含代碼的類（這很可能是您想要的）。 –

它在您將事件更改爲任何類型時有效。這樣，Angular可以訪問它的任何財產。

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

}

來源

2017-09-28 20:41:31

如何在Angular 2/Typescript中預覽存儲在假路徑中的圖片？

回答

相關問題