在 React 组件中渲染 GIF 动画

作者

在 React 组件中渲染动画 GIF

Render an Animated GIF in a React component

在 React 组件中渲染动画 gif：

  1. 将 gif 导入为import myGif from './path-to-my-gif.gif'.
  2. 添加一个img显示 gif 的元素，例如<img src={myGif} alt="" />.
应用程序.js
import myGif from './react-select-option-array.gif';

const App = () => {
  return (
    <div>
      <h2>Hello world</h2>

      <img src={myGif} alt="my-gif" />
    </div>
  );
};

export default App;

反应渲染动画gif

如果您想尝试这个示例，请右键单击上面的 gif，单击“将图像另存为”并将其下载到src您的 React 应用程序的目录中。

我们导入动画 gif 就像我们在 React 中导入任何其他图像一样。

指定指向 gif 的正确路径并在导入时显式写入扩展名非常重要。

上面的代码示例假定 gif 与文件位于同一目录中App.js。

例如，如果您的 gif 位于组件的上一级目录，您可以将其导入为import myGif from '../react-select-option-array.gif'.

确保您的 gif 位于src您的项目目录中。

如果您无法使用
ES6 模块
导入/导出语法加载 gif，请尝试使用 require。

应用程序.js
const App = () => {
  return (
    <div>
      <h2>Hello world</h2>

      <img src={require('./react-select-option-array.gif')} alt="my-gif" />
    </div>
  );
};

export default App;

此代码示例实现与前一个相同的结果，但使用 CommonJS require 语法来导入 gif。

就像前面的示例一样，导入路径假定 gif 与文件位于同一目录中App.js。

这两种方法都应该适用于现代 React.js 应用程序。然而，使用 ES6 导入/导出语法在 React 中导入图像或 gif 更为常见。

–

发表评论