Categories
React Answers

How to display images in React using JSX without import?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *