23.3k views
4 votes
How to add image from folder in react js?

User PgmFreek
by
8.1k points

1 Answer

2 votes

Final answer:

In order to add an image from a folder in React js, use the require statement to import the image into your component and then use the imported image variable as the source of the img tag in your JSX code.

Step-by-step explanation:

In React js, incorporating an image from a folder involves utilizing the require statement to import the image into your component.

Begin by ensuring the image file resides in the same directory as your component file.

Subsequently, employ the require statement to import the image, assigning it to a variable.

Finally, integrate the imported image variable as the source of the img tag in your JSX code.

Initiate the process by creating a variable to store the image file:

const image = require('/image jpg');

Subsequently, incorporate the imported image variable into the JSX code as the source for the img tag: <img src={image} alt='Image' />

This approach enables React to dynamically load the image from the specified folder, enhancing the flexibility and modularity of your component by seamlessly integrating images into the user interface.

User Yokomizor
by
6.8k points