Unable to access images from public folder with webpack configuration

Question

• This issue seems related to webpack config, as when we serve webpack then bundle/virtual copy is created for development environment, and because of images are not present its showing broken icon.
• I am unable to access images from public folder in a react component.
• My existing react application is now integrated with webpack, everything works fine excepts images.

I want to use images using url not by using import statement.

Expected way: <img src={"/images/logo.png"} alt="logo" className={classes.logo} />

Not Expected: import logo from '../../../public/images/logo.png'

following is my application structure, Please let me know what loader or configuration or any better way is present for dev & prod environment?

Here is my webpack configuration for development.

Thanks in advance :)

Answer 1

Try this

 <img src={process.env.PUBLIC_URL + '/yourPath.jpg'} /> 

Or this should also work

<img src={window.location.origin + '/yourPath.jpg'} />