The Ultimate Guide to Adding Images in a React JS App

Adding images to your React JS app is a common requirement for creating visually appealing and dynamic user interfaces. In this tutorial, I will guide you through the process of adding images to your React JS app step by step.

Step 1: Setting up your React JS app
First, make sure you have Node.js and npm installed on your machine. If not, you can download and install them from their official websites.

To create a new React JS app, open your terminal and run the following command:

npx create-react-app my-app

Replace my-app with the name of your app. This command will create a new React JS app with all the necessary dependencies and files.

Once the app is created, navigate to the app directory by running:

cd my-app

Now, start the development server by running:

npm start

This will open your app in the browser at http://localhost:3000.

Step 2: Adding images to your React JS app
To add images to your React JS app, you need to place the image files in the public directory of your app. Create a new directory inside the public directory called images and place your image files in this directory.

Next, you can reference these image files in your components using the public folder as the base path. For example, if you have an image called logo.png in the images directory, you can use it in your component like this:

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <img src={process.env.PUBLIC_URL + '/images/logo.png'} alt="Logo" />
    </div>
  );
};

export default MyComponent;

In the code above, we are using the process.env.PUBLIC_URL variable to reference the public folder in our app. By concatenating this with the path to the image file, we can display the image in our component.

Step 3: Styling images in your React JS app
You can style the images in your React JS app using CSS. You can apply styles directly to the image element using inline styles or create a CSS file and import it into your component.

To apply styles using inline styles, you can do the following:

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <img src={process.env.PUBLIC_URL + '/images/logo.png'} alt="Logo" style={{ width: '100px', height: '100px' }} />
    </div>
  );
};

export default MyComponent;

Alternatively, you can create a CSS file, for example styles.css, and style the images in that file:

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

Then, import the CSS file into your component:

import React from 'react';
import './styles.css';

const MyComponent = () => {
  return (
    <div>
      <img src={process.env.PUBLIC_URL + '/images/logo.png'} alt="Logo" />
    </div>
  );
};

export default MyComponent;

Step 4: Handling image loading errors
In some cases, the image files may not load due to network issues or incorrect file paths. To handle image loading errors in your React JS app, you can use the onError event handler on the img element:

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <img
        src={process.env.PUBLIC_URL + '/images/logo.png'}
        alt="Logo"
        onError={(e) => { e.target.src = process.env.PUBLIC_URL + '/images/default.png' }}
      />
    </div>
  );
};

export default MyComponent;

In the code above, we are using the onError event handler to set a default image if the original image fails to load.

That’s it! You have successfully added images to your React JS app and styled them using CSS. By following these steps, you can create visually appealing and dynamic user interfaces in your React JS app.