1
  • 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?

ss

Here is my webpack configuration for development.

ss2

Thanks in advance :)

UI Developer
  • 29
  • 5
  • You are setting the image `src` attribute correctly from what I can tell. What is the issue? – Drew Reese Jun 05 '21 at 05:39
  • @DrewReese when we serve webpack app, its create virtual copy of bundle, and images are not present in that bundle. thant's why its showing broken images. – UI Developer Jun 05 '21 at 05:47
  • So are the images not located in "public/images"? Or is this *some* webpack issue where we need to see what your code/config is doing? – Drew Reese Jun 05 '21 at 05:49

1 Answers1

0

Try this

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

Or this should also work

<img src={window.location.origin + '/yourPath.jpg'} />
Noel
  • 88
  • 7
  • When we serve webpack app, its create virtual copy of bundle & run dev server, and images are not present in that bundle. thant's why its showing broken images. so its not working like this way. – UI Developer Jun 05 '21 at 05:50