How do I reference a local image in React?

How can I load image from local directory and include it in reactjs img src tag?

I have an image called one.jpeg inside the same folder as my component and I tried both <img src="https://stackoverflow.com/questions/39999367/one.jpeg" /> and <img src={"https://stackoverflow.com/questions/39999367/one.jpeg"} /> inside my renderfunction but the image does not show up. Also, I do not have access to webpack config file since the project is created with the official create-react-app command line util.

Update: This works if I first import the image with import img from './one.jpeg' and use it inside img src={img}, but I have so many image files to import and therefore, I want to use them in the form, img src={'image_name.jpeg'}.

25 Answers
25

Leave a Comment