Including local images in React.js
To load a local image to the react program you have two ways to do that. First one is to use imports.
import logo from'./logo.png';
// ...later
<img src={logo} alt="logo" />
All the assets are handled by the build system and this will get filenames with hashes in production build so this method is good. The drawback is that if the file is moved to another location or deleted you will get an error. Second method is to use the public folder.
// Assuming logo.png is in public/ folder of your project
<img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />
Its not a best way. If you have a huge quantity of images and importing all of them one by one is a cumbersome job so you can use this method. Cons of this method is that you have to watch for cache bursting and be careful about the moved or deleted files and check them by yourself.
Muhammad Haris
14 Oct 2024
Bring your desktop to life with actress Madhuri Dixit HQ images, providing sharp and visually striking backgrounds.