添加GIF动画以响应Web应用

Question

当我将数据发布到后端时，我正在尝试为我的React Web应用程序定义过渡状态。

我想在我的渲染方法中显示动画gif。

所以我导入了gif图片（像这样 https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif）

使用简单的导入

import logo from '../assets/load.gif'

并将其添加到我的渲染中

喜欢：

<img src={logo} alt="loading..." />

但是我的react-dev服务器终端出现错误

未知人物

如何将gif动画添加到普通的SPA中。

Answer 1

您也可以使用require('path')方法

该require()方法获取图像并将其转换为数据 URI 格式在此处阅读有关数据 URI 的信息

<img src={require('../assets/load.gif')} alt="loading..." />

Answer 2

我有一个使用URL的版本，但是它停止工作。我找到了一个网站，您可以将微调框下载为GIF，然后将.gif放入图片文件夹。从那里可以使用：

import logo from '../assets/load.gif'

和

<img src={logo} alt="loading..." />