Webpack dynamic import method returns empty array instead of files in reactjs, How to solve?

Question

How to import and use images in Reactjs? I have imported all images from a folder but it does't return array with links. check this.

    function importAll(r) {
    return r.keys().map(r);
  }
    const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));
    console.log(images);

Check this screenshot of console:

Please help me in this!

Folder structure:

--src>
  --components>
      Projects.jsx
  --img>
       images

I am trying to import it in Projects component. but, How to do this?

import React from 'react';
import '../App.css';

function importAll(r) {
    return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));
console.log(images);

Please help in load the all images and use them.

Mosè Raguzzini · Accepted Answer · 2018-12-14 10:15:36Z

2

the correct require for you would be:

importAll(require.context('./img', false, /\.(png|jpe?g|svg)$/));

From docs:

require.context('./test', false, /\.test\.js$/);
// a context with files from the test directory that can be required with a request endings with `.test.js`.


require.context('../', true, /\.stories\.js$/);
// a context with all files in the parent folder and descending folders ending with `.stories.js`.

answered Dec 14, 2018 at 10:15

Mosè Raguzzini

15.9k1 gold badge34 silver badges46 bronze badges

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

1 Comment

Chetan Kumar Over a year ago

Oh, i had not seen the problem with path. I got it now. Also there should be two dot : importAll(require.context('../img', false, /\.(png|jpe?g|svg)$/)); It's working now. Thanks a lot

Collectives™ on Stack Overflow

Webpack dynamic import method returns empty array instead of files in reactjs, How to solve?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related