require function not working with image in react

Question

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!

Well I do not have access to the .webpack configuration file as it's handled by react, so I'd have to eject it. Do you recommend that @Darkshadow ? — Marek Štefanec
– Marek Štefanec, Commented Nov 19, 2020 at 11:42

masagus hariadi arief · Accepted Answer · 2024-04-17 12:22:47Z

34

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 like here

edited Apr 17, 2024 at 12:22

answered Mar 6, 2021 at 9:59

masagus hariadi arief

3413 silver badges5 bronze badges

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

2 Comments

Steven Muganwa Over a year ago

Thanks 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 Over a year ago

add .default and it's working..thx man

kunquan · Accepted Answer · 2020-11-19 11:52:23Z

7

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

answered Nov 19, 2020 at 11:52

kunquan

1,2671 gold badge12 silver badges25 bronze badges

2 Comments

Marek Štefanec Over a year ago

Yeah, that is bound to work. Do you use it this way every time you code React app?

kunquan Over a year ago

I 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

Peppermintology · Accepted Answer · 2022-09-17 20:18:14Z

1

None of the answers above worked for me. Instead I used require(path) outside the img tag and assigned it into a variable, then used the variable inside the img tag src. It works that way.

const F = {
  name: "Weiß",
  image: require('./images/0453-Eastbourne-F961-F01.png')
}

Inside the image tag:

src = { F.image }

edited Sep 17, 2022 at 20:18

Peppermintology

10.4k4 gold badges34 silver badges60 bronze badges

answered Sep 13, 2022 at 14:21

johnnn

2082 silver badges8 bronze badges

Collectives™ on Stack Overflow

require function not working with image in react

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related