How to Import Images in React Js

Share on facebook
Share on linkedin
Share on twitter
Share on email
Use "ufd6qb86" For Offers
https://youtu.be/MRbqLWAwqko
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.

Get 20% Off on Trading Fee Use "LG3RJV7Z"

More To Explore

Use "ufd6qb86" For Offers