React JS Tutorial - Importing Images

In this tutorial, we will learn about importing images in React. There are two options to store and display images inside a React component: one from the public folder and the other from the src folder. Let's explore each option one by one.

Importing Images from the Src Folder

First, let's get an image and display it inside a component from the src folder. Switch to your project and navigate to the src folder. You should see an SVG image of the React logo.

Now, let's get this image and show it inside a component. Open the About component and import the image.

import ReactLogo from '. /logo.svg';

Next, add an img tag inside the render method as follows:

<img src={ReactLogo } alt="react logo" width="500" /> 

Save the file and let's check the result. Switch to your browser and click on the About link. You should see the image displayed.

Importing Images from the Public Folder

Now, let's explore the second option. Let's get an image from the public directory and display it inside a component. Inside the About component, add another img tag.

<img src={process.env.PUBLIC_URL +"/logo192.png"} width="192" /> 

Save the file and let's check again. You should see both images displayed.

In this way, you can import and display images inside your React components.