Require inside a react component error 'Cannot find module'

Question

I am trying to require pictures from local path:

{userImages.map((image) => {
                  return (
                    <Carousel.Item key={image.id}>
                      <Card.Img src={require(image.picture)} />

The value inside the variable looks like this:

../../media/female/f1.jpg

The error I am receiving:

Cannot find module '../../media/female/f1.jpg'

I tried another solution to require before the return like this:

const pic = require(userImages[0].picture);

still received the same error. If I user require at the top of the component's file it does require correctly from this path.

Try if any of this work for you https://stackoverflow.com/questions/41947474/dynamically-loading-local-images-with-reactjs — kiranvj, Aug 26 '22 at 09:40
Does this answer your question? [Dynamically Loading Local Images with ReactJS](https://stackoverflow.com/questions/41947474/dynamically-loading-local-images-with-reactjs) — kiranvj, Aug 26 '22 at 11:53

score 0 · Answer 1 · answered Aug 26 '22 at 09:38

0

My proposal is to do something like this:

import imageSource from "../../media/male/m1.jpg"
<Card.Img src={imageSource} />

answered Aug 26 '22 at 09:38

Maxim Fedarau

191
1
1
10

The path are generated randomly, so I dont know which path will be sent in advance to hard code it – Alsakka Aug 26 '22 at 09:40
Did you add a relative path relative to the file that `Card.Img` is in? – Maxim Fedarau Aug 26 '22 at 09:43
Yes tried to change the path to be relative to Card.Img and tried with the parent component. – Alsakka Aug 26 '22 at 09:48
Try to use hardcoded path, using `require()`. If image is not displaying, then it is an issue with path. – Maxim Fedarau Aug 26 '22 at 09:50

score 0 · Accepted Answer · answered Aug 26 '22 at 11:41

Found the solution from this link : Dynamically Loading Local Images with ReactJS

it was to create context for the folder of images first at the top of the file like this:

const maleImages = require.context("../../media/male", true);
const femaleImages = require.context("../../media/female", true);

Then within the return include the image like this:

{userImages.map((image) => {
                  let img;
                  switch (user.gender) {
                    case "female":
                      img = femaleImages(image.picture);
                      break;
                    case "male":
                      img = maleImages(image.picture);
                      break;
                    default:
                  }

Thanks guys for your help!

Require inside a react component error 'Cannot find module'

2 Answers2