How to Import Images in React Js

You can import a file right in a JavaScript module. This tells webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src attribute of an image or the href of a link to a PDF.

Official Documentation – Adding Images, Fonts, and Files | Create React App (create-react-app.dev)

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

CSS Version

.Logo {
  background-image: url(./logo.png);
}

If you still facing problem please view the demo video tutorial so your doubts can be cleared.