require function not working with image in react
Solution 1
I guess the problem is the location of the image. When you use create-react-app
the app will be bundle into the public
folder. Then the require
statement would start to fetch the image - in this case in relative to the public
folder and not to the src
folder.
What I suggest you to do is try to move the image into the public
folder and try using the src
with URL relative to the public
folder. Demo here
Solution 2
use this one, it's work for me
<img src={require('./somRelativePath/image.jpg').default}
Explanation :
Value from let image1require('./somRelativePath/image.jpg')
is different with
import calendarPic from './somRelativePath/image.jpg';
If you console them, value from calendarPic
is a path, but if you use require
, the value is an object like here.
Marek Štefanec
Updated on June 17, 2022Comments
-
Marek Štefanec almost 2 years
I've used
<img src={require('./somRelativePath/image.jpg)}
in React many times. However, this time it seems not to be working. There are no errors whatsoever (such as that the image was not found etc.) but the broken image on website.After inspecting the element I was somewhat confused by the transpiled result in browser:
<img src="[object Module]" style="width: 5rem;">
It appears as if it loads the image as a component not the acutual file. I've created the app with
npx create-react-app
and haven't ejected it so far. So there is no error in babel or webpack configuration as it is currently handled by react under the hood.Importing it with
import
statement works just fine:import calendarPic from '../assets/pictures/calendar.svg';
Unfortunately that's not the solution because I have the local images saved in json and it would be definitely quite repetitive and ineffective as well to load all 50 images.
With the same
npx create-react-app
I've made a handful of mini-projects before but have never come across such a perplexing, yet so basic error. I'd be so thankful for any response as I've skimmed every possible solution throughout the internet.Thank you again and have a lovely day!
-
Marek Štefanec over 3 yearsYeah, that is bound to work. Do you use it this way every time you code React app?
-
kunquan over 3 yearsI usually use the
import Image from './source/
because I don't use a lot of image. Read more about the tradeoff between those two methods here -
Muganwas almost 3 yearsThanks man, I've struggled with this issue for a while now, I always ended up using alternative methods that I felt didn't work too well for me.
-
Syamsoul Azrien about 2 yearsadd
.default
and it's working..thx man