使用typescript文件數組中的圖像標籤html Angular 2

我目前正在製作一個web應用程序，我可以在應用程序上傳csv數據和圖片並顯示它們。目前我被卡住了，因爲我無法顯示我導入的圖像。我導入圖片來自本地驅動器上有：使用typescript文件數組中的圖像標籤html Angular 2

<li *ngIf="loadService.getLoads().length > 0"> 
    <input type="file" (change)="loadService.importPictures(loadService.getLoads(),$event)" 
      name="datafile" size="40" multiple> 
</li>

如果CSV列表將不會導入或空的，則第二個按鈕，載入圖片將不會顯示。然後圖像被放入一個Load模型類中，該類有一個稱爲File類型圖片的字段。 ImportPictures的方法只是將正確的圖片添加到相應的負載。

我想能夠使用這個文件在圖像的HTML標記，但我似乎無法得到它的工作？有沒有辦法做到這一點？

我想是這樣的：

<img *ngIf="load.picture" 
     name="recipient" 
     [(ngModel)]="load.picture" 
     src="{{load.picture}}" 
     ngDefaultControl/>

來源

2017-08-22 Frédéric Vanderheyden

你是否在嘗試使用它們之前上傳圖像？是否有任何錯誤消息？文件路徑是否正確？ – hagner

我在我的電腦上有圖像，我通過按下一個按鈕將其添加到我的計算機上的一個文件夾中。然後我選擇我想要在網頁上顯示的圖像，並將這些圖像放入File（File []）的數組中。文件數組然後存在具有以下格式的文件：** File {name：「023008.png」，lastModified：1503152676606，lastModifiedDate：Sat Aug 19 2017 16:24:36 GMT + 0200（Romance（zomertijd）），webkitRelativePath ：「」，size：445672，...} **。我現在想在我的html中使用這些文件來顯示圖像。 –

使用文件上傳所以唯一的辦法，你將能夠顯示它們是內有他們的時候瀏覽器不會給你的完整路徑的文件與您的html文件相同的文件夾。然後，你可以這樣做：

<img [src]="load.name"/>

但這隻會在嚴格控制的環境中工作。要在純開發環境以外使用這些文件，您需要首先將文件上傳到某個地方，然後通過將src屬性與新創建的url綁定來顯示它們。

來源

2017-08-22 15:19:45 hagner

我不認爲我需要我的文件的完整路徑，因爲我有我的Typescript中定義的圖像陣列。我只需要在我的html中顯示它們。問題是我需要以動態的方式添加圖片，因爲負載不斷變化，所以我不能簡單地將它們放在項目本身的文件夾中。或者我誤解了你？如果我用[src]嘗試它，那麼我收到一個未找到的404：** GET http：// localhost：4200/[object％20File] 404（Not Found）** –

對，所以我同意你不能將它們保留在特定的文件夾中，因爲您需要它是動態的。但是，您的HTML需要該文件的路徑，它不能在不知道路徑的情況下顯示圖像。你無法獲得路徑，瀏覽器不會提供給你。這就是爲什麼你首先上傳圖像到某種類型的存儲，然後使用新的網址來顯示圖像。 – hagner

哦，我明白了，沒有考慮到這一點......你有建議作爲存儲使用嗎？謝謝btw使它確定這樣做沒有辦法。 –

使用typescript文件數組中的圖像標籤html Angular 2

回答

相關問題