在 React 中載入動畫 GIF

在 React 網頁應用程式中顯示動畫 GIF，可以使用 <img> 元素搭配本機素材或託管網址，也可以將 GIF 設為 CSS 背景。若要用於載入指示，請提供有意義的替代文字，並只在相關工作尚未完成時顯示圖片。可用的素材語法取決於專案使用的 bundler 與設定。

方法 1：直接匯入 GIF

如果 GIF 屬於應用程式，且應與程式碼一起納入版本控制，可以將它存放在專案中。在已設定為可匯入圖片素材的專案裡，可以將匯入語句與元件寫在一起：import loadingGif from './assets/loading.gif'; function LoadingGif({ loading }) { return loading ? <img src={loadingGif} alt="Loading results" width={48} height={48} /> : null; }。請將 ./assets/loading.gif 換成檔案的實際路徑。元件會將匯入的素材值傳給 src；素材匯入方式由專案工具解析，而有些設定則改用 public 目錄路徑。如果工具無法辨識這項匯入，請查閱建置工具的素材處理說明。部分工具鏈也接受 require() 語法，但它不能普遍取代 import，也不會自行設定 GIF 的處理方式。

以下純 JavaScript 範例會顯示請求處理期間選用的圖片資訊。範例程式碼中的替代文字標籤 Loading results 維持英文，因為程式碼區塊會原樣保留：

const loading = true;
const loadingGif = { src: "/assets/loading.gif", alt: "Loading results" };
const image = loading ? loadingGif : null;

if (image) {
  console.log(`${image.src} | ${image.alt}`);
}

/assets/loading.gif | Loading results

在 JSX 中使用相同的 loading 條件，即可只在請求處理期間呈現匯入的素材。

請使用簡潔的 alt 文字說明圖片用途。如果 GIF 純粹是裝飾，而且旁邊的文字已寫出「正在載入」，請使用 alt=""，避免向螢幕閱讀器使用者重複相同資訊。若已知圖片尺寸，請一併設定，以預留版面空間。大型 GIF 可能拖慢載入並消耗頻寬；可以縮小尺寸、減少影格，或依設計需求考慮採用合適的影片或其他動畫格式。

方法 2：使用外部 GIF 網址

如果不想將素材打包進應用程式，可以使用託管 GIF 作為圖片來源。以下網址只是示意用的佔位網址；請換成可信任主機提供且穩定可用的網址，並像本機圖片一樣提供有意義的替代文字：

<img src="https://example.com/loading.gif" alt="Loading results" width="48" height="48">

完整的元件可以直接使用託管網址；請將佔位網址換成圖片的實際位址：

function ExternalGif() { return <img src="https://example.com/loading.gif" alt="Loading results" width={48} height={48} />; }

瀏覽器會向該主機請求圖片，並以指定尺寸顯示。請確認主機允許你的網站顯示該圖片，而且網址會持續有效。第三方伺服器可能速度緩慢、受到流量限制或無法使用；CDN 在某些部署情境中或許有幫助，但不保證傳送速度更快。若載入指示十分重要，可以準備小型本機備援圖片，或改用不依賴遠端圖片的 CSS 旋轉指示器。

方法 3：使用 CSS 背景圖片顯示 GIF

當動畫是用來裝飾固定尺寸的區域（例如橫幅）時，CSS 背景很實用。以下 CSS 規則與 JSX 元素會搭配使用：區域寬 320 像素、高 180 像素；cover 會縮放 GIF 以填滿區域，因此可能裁切部分圖片；center 則會讓裁切位置維持在中央。

請在兩處使用相同的 gif-background 類別：CSS .gif-background { width: 320px; height: 180px; background-image: url('/assets/banner.gif'); background-size: cover; background-position: center; } 與 JSX <div className="gif-background" aria-hidden="true" />。背景會在這個指定尺寸的區域內顯示 GIF，作為裝飾使用。背景圖片沒有 img 的替代文字屬性，因此若動畫傳達了附近文字未提供的資訊，就不應採用這種方式。如果文字疊在動態圖片上，請檢查整段動畫播放時的對比；加上不透明或半透明的覆蓋層，有助於維持文字可讀性。CSS 背景的載入方式與素材網址處理方式，也取決於專案的建置設定。

結論

若素材由應用程式維護，請使用本機匯入；若圖片由可靠的主機託管，請使用外部網址；若要在固定尺寸區域後方呈現裝飾，則可使用 CSS 背景。處理載入狀態時，優先選用小型素材、清楚的狀態文字，以及無障礙備援方案。由於 bundler 與主機處理素材的方式各不相同，請在目前設定的應用程式中測試圖片網址與載入行為。

常見問題

GIF 載入時要如何顯示佔位內容？

使用 React state 追蹤圖片的載入狀態，並處理圖片的 onLoad 與 onError 事件。例如，從 React 匯入 useState，再使用 function LoadingGif({ src }) { const [status, setStatus] = useState('loading'); return <>{status === 'loading' && <p role="status">Loading results</p>}{status === 'error' ? <p role="alert">The image could not be loaded.</p> : <img src={src} alt="" onLoad={() => setStatus('loaded')} onError={() => setStatus('error')} />}</>; }。將匯入的素材或託管網址傳給 src。status 角色會賦予載入訊息狀態語意，讓輔助科技能以不打擾使用者的方式播報這項動態變化。圖片載入期間會顯示文字；onLoad 觸發後文字消失；onError 觸發後則由錯誤訊息取代，並保留其警示行為。若 GIF 是裝飾用途，可以讓文字傳達狀態，同時為圖片設定空白替代文字。此程式碼範例中的狀態與錯誤訊息維持英文，因為程式碼區塊會原樣保留。

如何最佳化 GIF？

將 GIF 縮放至畫面實際需要的最大尺寸，並移除不必要的影格。比較處理後的檔案大小與視覺品質。若動畫較長或細節繁多，影片或其他動畫格式可能更合適；不過，支援情況與備援需求取決於目標瀏覽器及素材傳送設定。

React 可以控制 GIF 播放嗎？

動畫 GIF 會依照檔案中儲存的影格與循環資料播放，因此可能只播放一次，也可能重複播放。<img> 元素沒有影片式的播放與暫停控制項。如果使用者需要播放控制，請使用影片元素，或改用能提供這些控制項的動畫方案。