• Home
  • Portfolio
  • Articles
  • Pricing
  • About
  • Contact

Grabbing images in a local file in a React App

Jun 28th, 2019

Alex Quasar

reactreact imageslocal react images

Sometimes simple things in React, well are fairly simple, but if you don't know then it can be damn frustrating.

I have decided to write an article on this as I always forgot how the hell to import images from a local file in a sensible way. I have seen some solutions online where each image is imported separately using import at the top, but I really don't think that is necessary at all.

1. Put all your images in the public folder that react creates. Inside this public folder I create another folder called img where all my images go.

2. Next you can grab the image anywhere in your app using:

 <img className = "success__image" src="img/my-wonderful-image.jpg" alt=""/> 

Now note this works anywhere in any of your components no matter where we are since we are specifying an absolute path that starts inside the public folder. (i.e the one created by Create React App by default )

Hopefully that helps you solve this simple task and you can be on your way.