Cannot import images in react, Module Not Found

Question

my react app cannot find my image file. I have tried multiple ways of importing. I am importing this in my App.js

import logo from "./images/companyLogo.png"

<img src={logo} />

<img src={require("./images/companyLogo.png")} />

I even saw a way by putting the images file in the public folder and import it like following: (don't know why this worked for some people)

<img src="images/companyLogo.png" />

I have checked my directory it looks fine.

Please help T_T

Is there any reason why you are not adding your images in public folder and refer it easily in your jsx? — Sanish Joseph
– Sanish Joseph, Commented Sep 5, 2021 at 22:13
Im not sure if I understand your question. I was taught to put files and folders in src folder and not public folder — Haiquan Zheng
– Haiquan Zheng, Commented Sep 5, 2021 at 22:31
Which component in which this image being used? If it's something in components folder, path of the image is wrong. Path can be ../images/... — Sanish Joseph
– Sanish Joseph, Commented Sep 6, 2021 at 0:25
This image is being used inside App.js component, but I found a better way of importing images now. Just use it as background image in css — Haiquan Zheng
– Haiquan Zheng, Commented Sep 6, 2021 at 3:05

Dan Philip Bejoy · Accepted Answer · 2021-09-05 21:48:09Z

1

You need to have a Webpack loader in your webpack config to import images or other such files.

Webpack File Loader

answered Sep 5, 2021 at 21:48

Dan Philip Bejoy

4,4032 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Haiquan Zheng Over a year ago

are there way that I don't need this file loader?

Dan Philip Bejoy Over a year ago

Not if you want to import them like that

Haiquan Zheng Over a year ago

how come when others on youtube importing images like this, they never mention a word about this web pack thing? Is this web pack configuration suppose to be default when react app was created?

Dan Philip Bejoy Over a year ago

File loaders are not included by default as many dont import images as such except maybe for SVG files.

Haiquan Zheng Over a year ago

youtube.com/watch?v=MRbqLWAwqko this person didn't do web pack either and he's importing images the same way i did, but why his worked?

|

Collectives™ on Stack Overflow

Cannot import images in react, Module Not Found

1 Answer 1

10 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Related