在React Web应用程序中添加动态GIF图像

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开发服务器终端中遇到了一个错误。

未知字符。

如何将动画GIF添加到普通的React SPA。

- Probosckie

---

你不能将图像作为Javascript代码导入，你需要使用URL。 - SLaks

如果你正在使用Webpack，你是否设置了一个规则来使用file-loader或url-loader处理.gif文件？ - Jonny Buchanan

可能是如何使用Webpack文件加载器加载图像文件的重复问题。 - Mayank Shukla

Answer 1

我曾经有一个使用URL的版本，但它已经停止工作了。我找到了一个可以下载旋转器动画的网站，然后我将那个GIF文件放入我的图像文件夹中。从那里，您可以使用以下代码：

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

&

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

- Alex

Answer 2

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

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

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

- Bharath

---

对我来说起作用了。但是，我必须将gif从src文件夹外的位置（我的项目的public/images文件夹）移动到src文件夹内...在我的情况下，我只是将它添加到包含组件的文件相同的文件夹中。 - C-Note187

Answer 3

import logo from './gifPath.gif'

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

我用了这个方法，因为我下载了gif文件，所以它对我起作用了。

- Om Fuke

Answer 4

你只需要修改路径

尝试类似这样的内容：

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

- Israel

Answer 5

如果你在 TypeScript 中遇到了这个错误，或者在 JS 中没有任何显示，请查看答案。

'StaticImageData' 无法分配给类型 'string'

- Dabir Rahamni