DEV Community

Cover image for To import images in a React app, you can follow these steps:
Sushil Bishnoi
Sushil Bishnoi

Posted on

To import images in a React app, you can follow these steps:

Create a folder named images (or any other name of your choice) in the src directory of your React app. Place the images you want to import into this folder.

In your component file where you want to use the image, import the image using import statement. You can import the image as a variable or directly use it as a source for an tag.

import React from 'react';
import myImage from './images/myImage.jpg'; // Assuming your image file is named myImage.jpg

const MyComponent = () => {
  return (
    <div>
      <img src={myImage} alt="My Image" />
    </div>
  );
};

export default MyComponent;

Enter fullscreen mode Exit fullscreen mode

Alternatively, you can directly use the image as a source for an tag without importing it as a variable:

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <img src={require('./images/myImage.jpg')} alt="My Image" />
    </div>
  );
};

export default MyComponent;

Enter fullscreen mode Exit fullscreen mode

export default MyComponent;
Note that when using require, the path to the image file is specified as a string.

Save your changes, and the image should now be imported and displayed in your React app.

Make sure the path to the image file is correct and relative to the component file where you are importing it. Also, ensure that the image file format is compatible with the tag (e.g., JPEG, PNG, GIF, etc.).

Top comments (0)