Sometimes, we want to display images in React using JSX without import.
In this article, we’ll look at how to display images in React using JSX without import.
How to display images in React using JSX without import?
To display images in React using JSX without import, we use require
.
For instance, we write
const imageName = require("./images/image1.jpg");
//...
const Comp = () => {
//...
return <img src={imageName} />;
};
to call require
with the image path to import the image path.
Then we can use that as the value of the src
property to load the image.
Conclusion
To display images in React using JSX without import, we use require
.