添加动画 GIF 以响应 Web 应用程序答案

【问题标题】：Add animated gifs to react web apps添加动画 GIF 以响应 Web 应用程序
【发布时间】：2017-11-06 09:22:39
【问题描述】：

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

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

使用简单的导入

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

并将其添加到我的渲染中

喜欢：

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

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

未知字符

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

require() 方法获取图像并将其转换为数据 URI 格式Read about Data URI here

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

【讨论】：

为我工作。但是，我必须将 gif 从 src 文件夹之外的位置（我的项目的 public/images 文件夹）移动到 src 文件夹内......在我的情况下，我只是将它添加到与包含的文件相同的文件夹中组件。

【解决方案3】：

import logo from './gifPath.gif'

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

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

【讨论】：

【解决方案4】：

你只需要修改路径

尝试类似：

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

【讨论】：