添加动画 gif 以响应 Web 应用程序

IT技术 javascript reactjs animated-gif
2021-05-11 16:38:02

当我将数据发布到后端时,我正在尝试为我的 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 添加到普通的 React SPA。

4个回答

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

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

&

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

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

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

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

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

当我下载 gif 时,我使用了它并为我工作

你只需要修改路径

尝试类似:

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