DEV Community

Cover image for The Best Way to import images in ReactJs, and NextJs πŸš€
vito.mohagheghian
vito.mohagheghian

Posted on • Updated on

The Best Way to import images in ReactJs, and NextJs πŸš€

Importing images was always a pain in the neck πŸ‘” especially importing them with long paths in multiple lines, so I searched πŸ”Ž a lot to find the best ones and then tested them to ensure, they were the best to use in daily projects πŸ‘. So after spending hours πŸ• using it on different projects, I finally discover the answer for daily usage. πŸ˜€

certainly, it's not the best answer for use in different projects, so I will create posts for each situation soon.

without any interrupting let's get into it. ✍️

Make Index file

In the public folder create a new file index.js, or index.tsx, or any folder you want to export its existing images.

there are lots of third packages, which you can use to import, but I prefer to import them manually! lightness.

Import/Export Images

then export them like below:

Image description

Import In React Components

and instead of importing images with long paths, now you import them like below:

Image description

SVGs

You can also make file SVGs, and return SVG elements like react components.

Image description

Conclusion

It may not be the best for specific projects ⚠️, but for regular react projects is OK.

If you know a better way than this one πŸ•΅οΈ. please πŸ™ comment it πŸ’­ below to let others and I know πŸ‘.

keep in touch πŸ‘‹

Keep Coding Y'All πŸ‘¨πŸ»β€πŸ’»

Top comments (6)

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Great article..

Collapse
 
naucode profile image
Al - Naucode

Great article, you got my follow, keep writing!

Collapse
 
vitomohagheghian profile image
vito.mohagheghian

Thank you, 😍πŸ₯°πŸ™

Collapse
 
erinkahn profile image
Erin Kahn

I don't understand looking at how you exported and then imported. You exported image.png. Then you imported Image1 and Image 2 from an icons folder? But you made an index file in the public folder. When did you make an icons folder?

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
vitomohagheghian profile image
vito.mohagheghian

Thanks πŸ’™