Javascript 添加动画 gif 以响应 Web 应用程序
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/44371716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add animated gifs to react web apps
提问by Probosckie
I'm trying to define a transition state for my react web application when I'm publishing data to backend.
当我将数据发布到后端时,我正在尝试为我的 React Web 应用程序定义转换状态。
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)
所以我导入了 gif 图像(像这样https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif)
using a simple import
使用简单的导入
import logo from '../assets/load.gif'
and add it to my render
并将其添加到我的渲染中
like:
喜欢:
<img src={logo} alt="loading..." />
but I get an error in my react-dev server terminal
但是我的 react-dev 服务器终端出现错误
unknown character
未知字符
How to add animated gif's to a plain react SPA.
如何将动画 gif 添加到普通的 React SPA。
回答by Alex
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:
我有一个使用 URL 的版本,但它停止工作。我找到了一个网站,您可以将微调器下载为 GIF,然后我将该 .gif 文件放入我的图像文件夹中。从那里你可以使用:
import logo from '../assets/load.gif'
&
&
<img src={logo} alt="loading..." />
回答by Bharath
You can also use require('path')method
您也可以使用require('path')方法
The require()method fetches the images and converts it to data URI format Read about Data URI here
该require()方法获取图像并将其转换为数据 URI 格式在此处阅读有关数据 URI 的信息
<img src={require('../assets/load.gif')} alt="loading..." />

