Add animated gifs to react web apps

user_2095022 0
Viewed 89620

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 enter image description herehttps://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.

reactjs animated-gif javascript
4 Answers

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..." />
user_96230550 
import logo from './gifPath.gif'

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

I used this and worked for me as I downloaded the gif

user_119393080

You just have to modify the path

Try something like:

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