在 React 中載入動畫 GIF

1. 在 React 中使用 import 語句新增載入動畫 GIF
2. 在 React 中使用 require() 函式新增載入動畫 GIF

千言萬語，對於網路應用來說是正確的。在實踐中，你可能需要使用動態 gif 動畫來強調文章中的要點、在徽標中使用 gif 元素或其他目的。

使用視覺效果（例如符號）來傳達應用程式的狀態被廣泛認為是一種良好的使用者體驗實踐。本文討論了使用載入圖示 GIF 來更好地傳達資料正在載入並且應該等待。

在 React 中使用 import 語句新增載入動畫 GIF

要在 React 應用程式中載入動畫 gif 資源，首先，你必須將其轉換為 URI 格式。統一資源識別符號是一種用於將可視資產表示為字串的資料型別。

它使 React 開發人員能夠在 Web 應用程式中使用 GIF 等視覺效果。

你必須下載 GIF 檔案並將其儲存在專案的 assets 或 src 資料夾中才能使用此方法。如果你正在使用 create-react-app 包，你可以使用 import 語句在指定路徑中顯示可視資源。

讓我們看一個例子。

import loadingGif from "../assets/waiting.gif"

create-react-app 環境中的工具會自動將 .gif 檔案轉換為 URI。然後我們可以設定 src 屬性等於這個值。

<img src={loadingGif} alt="wait until the page loads" />

在 React 中使用 require() 函式新增載入動畫 GIF

import 語句僅在 ES6 中引入，並且僅在某些開發環境中有效。

如果你受限於 ES5 特性，你可以使用 require() 函式，它將路徑作為引數。該函式將影象轉換為 URI 值。

讓我們看一下樣本。

let loadingGif = require("../assets/waiting.gif")
<img src={loadingGif} alt="wait until the page loads" />

最終，這個表示式將與 import 語句具有相同的效果。與上面的示例一樣，影象值必須儲存在應用程式的本地目錄中。