Images in React

You’ve used create-react-app to start your React project, and now you want to use an image tag in your project. There are a couple of ways of going about this.

1. Import the image into the component

Firstly, you have to save the image somewhere in your src folder. Next, you need to import the image into the React component you’d like to use the image in. For example, a Logo.

import Logo from './path/logo.jpg'

In your image tag, you can now use this variable name are your src.

function Home() {
   return (
     <div>
       <img src={Logo} alt="Company logo" />
     </div>
   );
}

2. Image in the public directory

Place the image somewhere in the public directory. For this example, let’s pretend there is an “images” directory in the public folder containing the logo.jpg. You can now write the path — after /public/ — as the src value directly into the image HTML element.

function Home() {
   return (
     <div>
       <img src="images/logo.jpg" alt="Company logo" />
     </div>
   );
}

There it is! Two ways to use images in React.