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.

You can't import an image as Javascript code. You need to use a URL. — SLaks, Jun 05 '17 at 14:54
If you're using Webpack, have you set up a rule which uses `file-loader` or `url-loader` for `.gif` files? — Jonny Buchanan, Jun 05 '17 at 15:02
Possible duplicate of [How to load image files with webpack file-loader](https://stackoverflow.com/questions/37671342/how-to-load-image-files-with-webpack-file-loader) — Mayank Shukla, Jun 05 '17 at 15:03

score 32 · Answer 1 · answered Dec 16 '17 at 03:21

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

score 14 · Answer 2 · answered Nov 02 '18 at 09:02

14

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

answered Nov 02 '18 at 09:02

Bharath

335
2
8

worked for me. but, I had to move the gif from an outside-of-src-folder location (my project's public/images folder) TO inside the src folder... in my case, I just added it to the same folder as the file containing the component. – C-Note187 Feb 19 '20 at 06:05

score 2 · Answer 3 · answered Jan 21 '21 at 19:35

2

import logo from './gifPath.gif'

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

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

answered Jan 21 '21 at 19:35

Om Fuke

482
1
7
14

score 0 · Answer 4 · edited Jun 07 '22 at 19:14

0

You just have to modify the path

Try something like:

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

edited Jun 07 '22 at 19:14

pritam

2,452
1
21
31

answered Oct 05 '20 at 23:47

Israel

11
1

score 0 · Answer 5 · answered May 23 '23 at 11:27

0

Check this answer if you get this error in typescript. or nothing shows up in js

'StaticImageData' is not assignable to type 'string'

answered May 23 '23 at 11:27

Dabir Rahamni

89
1
5

Add animated gifs to react web apps

5 Answers5

Linked