添加GIF动画以响应Web应用 [英] Add animated gifs to react web apps

问题描述

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

I'm trying to define a transition state for my react web application when I'm publishing data to backend.

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

I want to show an animated gif in my render method.

因此，我导入了gif图像(例如

So I import the gif image (like this https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif )

使用简单的导入

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

并将其添加到我的渲染器中

and add it to my render

喜欢:

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

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

but I get an error in my react-dev server terminal

未知字符

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

How to add animated gif's to a plain react SPA.

推荐答案

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

I had a version that used a URL however, it stopped working. I found a site that you can download the spinner as a GIF, then I put that .gif into my images folder. From there you can use:

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

&

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

这篇关于添加GIF动画以响应Web应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！