1

I have been trying to load images using webpack, but somehow it's not working. here's the related code

 { test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]' },

and here's one example of the component where the image should load

<ListItem
            leftAvatar={
              <Avatar src="assets/images-demo/avatars/128.jpg" />
            }

but when the page loads, I get 

http://localhost:8080/assets/images-demo/avatars/128.jpg 404 (Not Found)

In the network tab, I see the type of the images as text/html, (not sure why) and I see the initiator as DOMLazyTree. so, could you give me an idea of what's going wrong here?

Cœur
  • 37,241
  • 25
  • 195
  • 267
faraz
  • 2,603
  • 12
  • 39
  • 61
  • 2
    did you try `import img from "path/to/image"` and use like `` ? – Emad Emami Nov 02 '17 at 05:07
  • you mean import the image in file using the image? but I already did this --> and it will be a pain if I have to do this for all the images or if I have to individually import all the images. – faraz Nov 02 '17 at 05:10
  • widthout importing your path is just a string! https://github.com/webpack-contrib/file-loader#examples – Emad Emami Nov 02 '17 at 05:12
  • ok. leyt me try that. in which file do I import the image? in the one where I used the url I mentioned above? or do you mean some other file? sorry, a little new to webpack and file loader – faraz Nov 02 '17 at 05:15
  • import in exact file which is in. – Emad Emami Nov 02 '17 at 05:24

0 Answers0