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 Coding Y'All 👨🏻💻
Latest comments (6)
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?
Great article..
Great article, you got my follow, keep writing!
Thank you, 😍🥰🙏
Thanks 💙