How to Import Images in React Js

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email
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.

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore