ReactJS: Uncaught ReferenceError: require is not defined-CodePudding

I am trying to read images from folder in reactJS application. I tried with this Solution that is very close to my question on SO but console showing me this error each time.

Here is my code

<img src={require('../images/Mobile/Grab & Go.png')} alt="" />

Console is showing this error

Portfolio.jsx:23 Uncaught ReferenceError: require is not defined

CodePudding user response：

You have to import the image then use it as a value passed to the src prop of img.

import Image from '../images/Mobile/Grab & Go.png';
...
<img src={Image} alt="" />

CodePudding user response：

The require function is not available in the browser, it is only available in Node.js. In a React application, you can use the import statement to import images.

Here is an example of how you can import an image and use it in your React component:

import myImage from '../images/Mobile/Grab & Go.png';

then on image tag use the code below:

<img src={myImage} alt="" />;