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;
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;
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)