Display images in React using JSX without import

You need to require the file like so:

<img src={ require('./images/image1.jpg') } />

We could use require instead of import statment. Like ,

<img src={require("folder/image.format")} alt="image not found" />

But if you run it , it will show image not found!!!

We could simply solve it by changing the statment by adding .default

let image = require("folder/image.format");

<img src={image.default} alt="image not found" />

require is used for static "imports", so you just need to change your imports.

Example:

var imageName = require('./images/image1.jpg')
<img src={imageName} />

Related