React-image：用於依序載入圖片的共用元件

以 React 為基底的共用元件，可由小至大依序載入多個圖片。

在載入失敗時，將自動嘗試載入更大尺寸的圖片。

npm: https://www.npmjs.com/package/@readr-media/react-image

專題介紹

• 為跨專案所使用的共用元件，可傳入多個圖片網址。
• 可依據使用者裝置大小，或由開發者決定初始載入的圖片尺寸。
• 若特定尺寸載入失敗，則嘗試載入更大尺寸圖片，直到載入成功，若全部載入失敗則顯示預設圖片*。
• 上述特性可以確保圖片顯示的同時，減少圖片所需下載量。
• 可傳入參數決定是否需懶載入 (lazy-loading) 圖片。

*舉例來說，假設傳入的圖片網址從小到大分別為「小、中、大、特大、原圖」，而元件判斷應由「中」開始嘗試載入圖片，如果「中」圖片載入失敗，則會向上嘗試載入更大尺寸的「大」圖，依此類推，直到載入成功，或全部載入失敗顯示預設圖片。

使用技術

• 使用 Promise Chain 實作圖片依序載入。
• 使用 Intersection Observer 實作圖片懶載入。
• 使用 Webpack 進行打包，並輸出 esm 與 cjs 兩種類型。