How to display images from local assets/images folder when working with React

It’s not as straightforward as it might seems to be

Yogesh Chavan
Feb 6 · 3 min read
Photo by Caspar Camille Rubin on Unsplash

In this article, we will see how we can load local images when using React.
So let’s get started.

1.When using Create React App:

To start with, clone the countdown timer repository code from HERE which I created in this article

once cloned, run the following commands to start the application

1. npm install
2. npm start

Now, download the images that we will be using to display from HERE.
Create a new directory with name images inside src directory of the project and place those downloaded images inside src/images directory

Now, open the Timer.js and search for Begin Countdown button and we will add an image inside the button as

<img alt="timer" src="images/timer.png" />

So your button code will look like this

<Button
variant="primary"
type="button"
onClick={this.calculateCountdown}
>
Begin Countdown
<img alt="timer" src="images/timer.png" />
</Button>

If you save the file and load the application, you will see that, the image is not displayed but broken icon is displayed for the button with alt text.

So to fix this, we need to include the image by using require syntax

<img alt="timer" src={require('./images/timer.png')} />

Now you will see that, the image is loaded as shown below

But the image itself is too large, lets add some css to make it look good

In styles.css add following CSS

img {
width: 40px;
height: 40px;
}

and for the button add btn-start class

<Button
className="btn-start"
variant="primary"
type="button"
onClick={this.calculateCountdown}
>
Begin Countdown
<img alt="timer" src={require('./images/timer.png')} />
</Button>

So now the button and image will look nice

Let’s add some background image to the application so the application will look nice.
For the body tag add background property in style.css

body {
padding: 10px;
font-family: sans-serif;
background: url('./images/background.jpeg');
text-align: center;
}

Now, the application will look nice.

Note: As the background image is loaded from CSS file, it’s displayed correctly. Only when we load the local image using img tag, we need to use the require syntax

Github Source Code: https://github.com/myogeshchavan97/countdown_timer_updated

2.When using your own webpack and babel setup:

If you have your own webpack and babel setup for React as described in the article HERE , then you need to follow the following steps

  1. Install the url-loader npm package using
npm install url-loader@3.0.0

2. Add the url-loader configuration in webpack.config.js as

{
test: /\.(jpg|jpeg|png)$/,
use: {
loader: 'url-loader'
}
}

3. Import the image as

import timerImage from './images/timer.png';

4. Use the image in the img tag

<img alt="timer" src={timerImage} />

That’s it for today. Hope you learned something new today.

Subscribe to get weekly updates directly in your inbox https://subscribe-user.herokuapp.com/

JavaScript in Plain English

Learn the web's most important programming language.

Yogesh Chavan

Written by

Full Stack Developer | Javascript | React | Nodejs. Subscribe to get weekly updates directly in your inbox https://subscribe-user.herokuapp.com/

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade