Dynamically importing images | React

Hey there Spaghetti Coder. Today I will show you my favorite way to import images in React.

You will find many ways to do this on stackoverflow, but I have found that most of them are buggy and don't work for everyone. In the presented case, we want the source of the image to be passed down to a component by the props property.
Rather than storing the images a nested directory inside the "src" folder, we can make a sub-directory under the "public" folder and then access the images from anywhere inside our project. This way we don't have to tell Webpack to load any special file, which is nice.

Thanks for watching and make sure to hit the like button as it helps with the algorithm! xD

[artemiscy]

Thank you so much! Importing images in React has been a pain in my thorn for a while!

[RoyerAdames]

Update: yes it works. Thank you this solution is what I was looking for. It's clean and easy. Nice

OK brother I like your answer. I test it out.

[ambrosearuwa]

Please which IDE is this???
It looks like pycharm but my pycharm don't have .js support

[pkc]

Omg! I've been tinkering with require() for an hour, thank goodness I found your solution before moving on to other more lengthy complicated ones that I found online. Thanks dude!

[secure]

perfect
thanks alot. save time for me