How To Render An Animated GIF In A React Component

Knowing how to render an animated GIF in a React component will be helpful for you if you want to make your page gorgeous or if you want to know more about React. So, how to do it? Let’s go into detail now.

Render an animated GIF in a react component

Using the img element

We can pass an animated GIF through the img element by the src attribute. You will need to import the animated GIF inside your device. You can download a GIF image by right click on it and pressing the ‘Save image as’ option. Then you can put your GIF image inside your project. I recommend putting it in the img folder, which contains all images, in the src folder. That plain constructure will help make your code easy to maintain. Then, use it with the img element by importing syntax to import the image to your file.

Example:

import React from "react";
import ReactDOM from "react-dom/client";
import gifImg from "./img/giphy.gif";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <img src={gifImg}></img>
    </React.StrictMode>
);

body {
    background-color: black;
    display: flex;
    justify-content: center;
}

Output:

As you see, I can set any name to GIF that you can use anywhere in your file. I set the background color to black so you can see how GIF images work.

Using the image element with direct link

Or you can also use a direct link to the src attribute. You can get the GIF link by right click on GIF and selecting ‘Copy image link’.

Example:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <img src="https://media1.giphy.com/media/rZgpC9yTwUjt81vbJq/giphy.gif?cid=790b7611d8f2ffcc95e3495c1a6b2da62fcbac574413df29&rid=giphy.gif&ct=g"></img>
    </React.StrictMode>
);

Here with a direct link, I don’t need to download a GIF image or import an image into my file. I can simply pass the GIF link to the src attribute directly. Notice that with the direct link, I wrap the link inside the double quotes symbol, and with the local image, I use curly braces because it is a value.

You can use the require syntax if you can’t load the gif image while using import syntax. The require syntax is similar to import syntax, but we are using it in the older version.

Example:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <img src={require("./img/giphy.gif")}></img>
    </React.StrictMode>
);

Summary

I showed you how to render an animated GIF in a React component in this tutorial. You can use the img element and then pass in the src attribute the link to your GIF image.

Maybe you are interested:

• Pass an Array as prop to a component in React.js
• Passing data from child to parent component in reactjs
• Import Aliases When Importing Components

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm