在 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 语句具有相同的效果。与上面的示例一样，图像值必须存储在应用程序的本地目录中。