添加动画 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 图像(像这样 https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.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 动画添加到普通的 React SPA.

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

推荐答案

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

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屋！