在Angular中，不知道擴展名時如何加載圖像？

Question

我有一個登錄頁面，希望能夠啟用自定義品牌。 客戶登錄后，他們將能夠上載.gif，.jpeg或.png圖片，然后在他們注銷后將其用於登錄頁面。 該文件將以通用文件名存儲在預定位置，所以我將知道所有這些，而我只是不知道上載了哪種文件格式。

因此，基本上，當客戶導航到www.example.com/login/:id該應用程序將從存儲圖像的公共安裝的驅動器中加載圖像文件。 安裝映像的已安裝驅動器的目錄結構將類似於/mnt/resource/client/:id/logo.* 。 客戶尚未通過身份驗證，因此我將無法訪問任何數據庫。

我的計划是將目錄/mnt/resource/client在一個環境變量中，並且在登錄組件加載完畢后，我將附加來自路由參數的ID和文件名，但是到那時我還不知道擴展名是。

有沒有辦法能夠將html img標簽中的圖像加載到/mnt/resource/client/0001/logo.*類的位置？ 另外， logo.[png, jpg, gif]將是唯一存儲在此位置的東西。

編輯：我試圖使用/mnt/resource/client/0001/logo.*以及/mnt/resource/client/0001/logo但都給出了404。我認為可以，但是我想無論如何都會嘗試。

或者，是否有更好的方法來解決此問題？

另外，如果這是重復的問題，我很抱歉，我試圖搜索相關的問題，但沒有找到任何問題，但是也不確定我是否正確地制定了搜索查詢。

另外，讓我知道是否有任何遺漏的細節。 提前致謝！

Answer 1

為了以html加載圖像，您必須知道完整路徑。

您在這里有幾個選擇：

1. 將完整的映像名稱/擴展名存儲在數據庫中。 然后，您的應用程序邏輯將只需要允許從登錄頁面訪問數據庫的“公共”部分。 您的登錄頁面將請求標准圖像路徑，例如example.com/resources/loginImage_clientID ，並且您的服務器將基於該ID進行數據庫查找，並返回正確的圖像。
2. 對登錄圖像進行服務器端轉換，以便您始終使用相同的擴展名。

我還假設您沒有為每個客戶端手動上傳這些圖像，因此大概您已經在某個地方的數據庫中獲得了完整的圖像名稱和擴展名，以便可以驗證允許哪個客戶端更新哪個圖像。

Answer 2

我會建議使用race從RXjs ：

const extensions = ['png', 'jpg'];

race(
   ...extensions.map(ext => this.http.get(`${file}.${ext}`).pipe(
     catchError(e => NEVER),
   )),
)

race組合器將取消列表中的其他可觀察對象，從而取消HTTP調用。 catchError會將錯誤變成無法完成的觀察，從而將自己從競爭中消除。

但是，正如其他人所述，這將導致性能下降，您應該學習服務器如何在不擴展的情況下提供文件。

Answer 3

該文件將以通用文件名存儲在預定位置，所以我將知道所有這些，而我只是不知道上載了哪種文件格式。

不要緊。

服務器應將圖像存儲在沒有文件擴展名的給定URL中。

http://www.example.com/user/:id/logo

當瀏覽器請求資源時 ， 服務器在HTTP標頭響應中包括內容類型，瀏覽器將自動顯示圖像。 不管是PNG，JPEG還是GIF。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types

如果服務器不支持內容類型檢測，則它應發送content-type: image/* 。

大多數現代的Web服務器都允許您配置特定URL或URL范圍的內容類型，並且大多數服務器會自動檢測靜態文件的內容類型。

不要向您的服務器發出無意義的404請求。