DEV Community

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

Posted 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


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

Image description


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 (5)

codeofrelevancy profile image
Code of Relevancy

Great article..

naubit profile image
Al - Naubit

Great article, you got my follow, keep writing!

vitomohagheghian profile image

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

Sloan, the sloth mascot
Comment deleted
vitomohagheghian profile image

Thanks πŸ’™

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!