Menu
I'm trying to define a transition state for my react web application when I'm publishing data to backend.
I want to show an animated gif in my render method.
So I import the gif image (like this 
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
unknown character
How to add animated gif's to a plain react SPA.
848
To render an animated gif in a React component:Import the gif as import myGif from './path-to-my-gif. gif' . Add an img element that shows the gif, e.g. <img src={myGif} alt="" /> .
Write the following code in your App. js file: import { GiphyFetch } from '@giphy/js-fetch-api' import {useState} from 'react' import TextList from './components/TextList' import Error from './components/Error' import './App. css'; const giphy = new GiphyFetch(process.
It is in GIF format i.e. Graphics Interchange Format file. We need to use the <image> tag with the src attribute to add an animated image in HTML. The src attribute adds the URL of the image (file destination). Also, we can set the height and width of the image using the height and width attribute.
You can also use require('path') method
The require() method fetches the images and converts it to data URI format Read about Data URI here
<img src={require('../assets/load.gif')} alt="loading..." />
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..." />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
