React.js: requiring images fails when mapped over

Question

I followed this post to require images into my un-ejected create-react-app for Webpack: React won't load local images

Without the above an error is thrown.

The issue is that when doing this in a mapping function it breaks down:

const ThumbNail = styled.img`
    border: 2px dotted blue;
`;

export default props => {

  const images = [
    '../images/dragonglass_pendant.jpg',
    '../images/dragonglass_pendant2.jpg', 
    '../images/dragonglass_pendant3.jpg',
  ];

  return (
    <React.Fragment>
      {
        images.map(imageSrc => {
          console.log(imageSrc, `=====imageSrc=====`);
          return <ThumbNail src={require(imageSrc)} />
        })
      }
    </React.Fragment>
  )
}


// Chrome browser console
../images/dragonglass_pendant.jpg =====imageSrc=====
ImageThumbnails.jsx:25 ../images/dragonglass_pendant.jpg =====imageSrc=====
catalog sync:2 Uncaught Error: Cannot find module '../images/dragonglass_pendant.jpg'
    at webpackEmptyContext (eval at ./src/catalog sync recursive (main.chunk.js:55), <anonymous>:2:10)
    at eval (ImageThumbnails.jsx:26)
    at Array.map (<anonymous>)
    at eval (ImageThumbnails.jsx:24)
    at renderWithHooks (react-dom.development.js:13354)
    at mountIndeterminateComponent (react-dom.development.js:15407)
    at beginWork (react-dom.development.js:16042)

I have also tried not requiring. This fails

I've also tried using the import keyword at the top. This works but removes programmatic image imports (images must import based on API call data)

Does anyone know why the require breaks above when mapped over?

EDIT: Using the import keyword in place of require I get the same error for each image:

catalog lazy groupOptions: {} namespace object:5 Uncaught (in promise) Error: Cannot find module '../images/dragonglass_pendant.jpg'
at eval (eval at ./src/catalog lazy recursive (main.chunk.js:55), <anonymous>:5:11)

In react, in order to get the src of an image, you have to import the image into a variable and put that variable in the src attribute. — Sagi Rika, Feb 27 '19 at 15:40
I am able to require a single string containing the relative URL. But inside .map() it doesn't work for some reason. Yes, importing works, but I need to control imports programmatically if I do that instead. — Sean D, Feb 27 '19 at 15:43
What do you mean? Have you tried writing import instead of require? e.g. `src={import(imageSrc)}` — Sagi Rika, Feb 27 '19 at 15:44

score 1 · Answer 1 · answered Feb 27 '19 at 17:22

Solved by moving require statements into the array as mentioned here: Require(img path) not working/ cannot find module "." reactjs

const images = [
  require("../images/dragonglass_pendant.jpg"),
  require("../images/dragonglass_pendant2.jpg"),
  require("../images/dragonglass_pendant3.jpg"),
]

Bonjov · Answer 2 · 2019-02-27T16:33:05.320

0

 const images = [
   './images/dragonglass_pendant.jpg',
   './images/dragonglass_pendant2.jpg', 
   './images/dragonglass_pendant3.jpg',
 ];


export default () => (
    <React.Fragment>
        {images.map((image, idx) => <img key={idx} src={require(`${image}`) />)}
    </React.Fragment>
)

in this example images must be inside to src folder . it works for me

DEMO

edited Feb 27 '19 at 16:33

answered Feb 27 '19 at 15:52

Bonjov

305
1
10

This works but hardcodes the imports. How can I import them starting from an array of string urls to be imported? – Sean D Feb 27 '19 at 15:54
I tried adding the template strings as you did. Unfortunately no change, still errs – Sean D Feb 27 '19 at 16:22
ok. i think you have incorrect path to your images... i will do that codesandbox – Bonjov Feb 27 '19 at 16:24
1

Yes your codesandbox works. Strange what's happening on my end. I will review again – Sean D Feb 27 '19 at 16:37

React.js: requiring images fails when mapped over

2 Answers2