Add animated gifs to react web apps

Question

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.

Answer 1

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..." />

Answer 2

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..." />