服務器上傳後Angular2更新圖像[src]

我有一個Angular 2應用程序。它有一個組件允許用戶裁剪並上傳圖像到服務器。父組件在src標記中顯示圖像。我需要能夠更新此src標記，一旦更新的圖像上傳。 src標籤中的鏈接將始終保持不變。一旦我手動刷新瀏覽器，我會看到新上傳的圖像。服務器上傳後Angular2更新圖像[src]

這是我在HTML中的圖像。 URL在組件中定義...

<img [src]="url" />

父組件承載圖像上傳組件是這樣的...

<imageUploadCropper [postUrl]="postimageProfileUrl"></imageUploadCropper>

圖像上傳組件將上傳的圖像是這樣的...

const formData = new FormData(); 
    formData.append("uploadedImage", this.data.image); 

    this._http.post(this.postUrl, formData, { headers: headers }) 
     .subscribe();

如何在Angular2中重新加載圖像？我應該只是重新加載頁面/路線或以另一種方式嗎？以某種方式使用區域會有幫助嗎？

來源

2016-12-13 Ben Cameron

它不是一個角度問題。它是一個緩存問題。更改您的網址格式以允許版本控制或添加'？'在您的文件版本之後添加網址的結尾。 –

您必須更改src才能重新加載。其中一個解決方案可以將隨機字符串添加到網址的末尾。

this._http.post(this.postUrl, formData, { headers: headers }) 
    .subscribe(() => this.url += '?random+\=' + Math.random());

來源

2016-12-13 15:54:52 rzelek

我想過使用像這樣的緩存斷路器，但希望有一個更清潔的NG2方式。那麼，沒有辦法，我們可以刷新圖像元素，而無需添加到網址？ –

緩存失敗與Angular 2無關，這只是一個「網絡事物」。另一種方法是你可以獲取圖像本身，base64對它進行編碼並使用base64數據更新源代碼... –

感謝您的想法。這是我懷疑的。我會玩一玩，看看我能想出什麼。 –

服務器上傳後Angular2更新圖像[src]

回答

相關問題