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 ` and 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'}`.

First of all wrap the src in {}

Then if using Webpack;
Instead of:
`

You may need to use require:



Another option would be to first import the image as such:

import logo from './logo.jpeg'; // with import

or ...

const logo = require('./logo.jpeg'); // with require

then plug it in...

`

I'd recommend this option especially if you're reusing the image source.

Stack Overflow Q#39999367, score: 718