如何向前端投放圖像金字塔？

Question

我創建了一個圖像金字塔，由大約5個目錄中的20-50個圖像組成。向前端服務的最佳方式是什麼？將目錄託管在可直接引用的地方？這似乎並不安全。通過API單獨提供50個服務？這似乎相當笨拙。我不確定那是否會起作用。我相信他們需要進入目錄結構來與前端組件進行交互。那可能嗎？

任何意見表示讚賞。

Answer 1

這個問題的答案會根據不同的因素而有所不同。

設置它的一種方法是將圖像文件託管在Web服務器上，並使用像cloudflare這樣的cdn來緩存整個站點。 cdn在這裏至關重要，否則您的資產可能需要很長時間才能加載。

高級步驟設置這將是從節點的Web服務器配置一個靜態的目錄，以便您的資產可以通過瀏覽器通過URL像這樣訪問：http://localhost/static/images/image.png

假設你正在使用的WebPack ，您可以使用file-loader簡單地將import圖像文件像其他任何js文件一樣使用，並將其用於您的反應組件中。當您構建應用程序時，您可以配置file-loader自動將圖像文件路徑的引用替換爲網頁網址的引用。

最後，如果您只有5個圖像目錄，則可以在反應應用程序中爲每個目錄創建5條路線，並在每條路線中導入路線將顯示的圖像（例如import image from './static/images/image.png'或import * as images from './static/images/album'），並渲染它（例如，<img src={image} />或遍歷圖像數組並呈現每個圖像）。