How to use Image in React

In this blog, we will learn how to use the image in a react, there are two ways to use the image in a react.

First, you can import an image then you can use it.

Second, you can put your image inside the public folder then there is no need to import the image file one by one, this option is better than the first option if you want to use images more than one.

Let’s  see the following steps on how to use the image in react:

How to use Image by Import

• Create a folder named images inside the src directory.
• Put your image inside the images folder.
• Write the following code in your js file where you want to use the image:

• import logo from '../images/logo.png';

• Write the following code in your image src:

• <img src={logo}/>

How to Use Image from Public Folder

• Create a folder named images inside the public folder.
• Put your image inside the images folder.
• Write the following code in your javascript file where you want to use the image:

• <img src={process.env.PUBLIC_URL+"images/logo.png"} />

Categories: web designing react front end developer