This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by vito.mohagheghian

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:

Import In React Components

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

SVGs

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

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 👨🏻‍💻

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by vito.mohagheghian

Print Share Comment Cite Upload Translate Updates

APA

vito.mohagheghian | Sciencx (2023-02-04T16:20:54+00:00) The Best Way to import images in ReactJs, and NextJs 🚀. Retrieved from https://www.scien.cx/2023/02/04/the-best-way-to-import-images-in-reactjs-and-nextjs-%f0%9f%9a%80/

MLA

" » The Best Way to import images in ReactJs, and NextJs 🚀." vito.mohagheghian | Sciencx - Saturday February 4, 2023, https://www.scien.cx/2023/02/04/the-best-way-to-import-images-in-reactjs-and-nextjs-%f0%9f%9a%80/

HARVARD

vito.mohagheghian | Sciencx Saturday February 4, 2023 » The Best Way to import images in ReactJs, and NextJs 🚀., viewed ,<https://www.scien.cx/2023/02/04/the-best-way-to-import-images-in-reactjs-and-nextjs-%f0%9f%9a%80/>

VANCOUVER

vito.mohagheghian | Sciencx - » The Best Way to import images in ReactJs, and NextJs 🚀. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/02/04/the-best-way-to-import-images-in-reactjs-and-nextjs-%f0%9f%9a%80/

CHICAGO

" » The Best Way to import images in ReactJs, and NextJs 🚀." vito.mohagheghian | Sciencx - Accessed . https://www.scien.cx/2023/02/04/the-best-way-to-import-images-in-reactjs-and-nextjs-%f0%9f%9a%80/

IEEE

" » The Best Way to import images in ReactJs, and NextJs 🚀." vito.mohagheghian | Sciencx [Online]. Available: https://www.scien.cx/2023/02/04/the-best-way-to-import-images-in-reactjs-and-nextjs-%f0%9f%9a%80/. [Accessed: ]

rf:citation

» The Best Way to import images in ReactJs, and NextJs 🚀 | vito.mohagheghian | Sciencx | https://www.scien.cx/2023/02/04/the-best-way-to-import-images-in-reactjs-and-nextjs-%f0%9f%9a%80/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.