How to import all images from a folder in ReactJS?

Question

I want to import all images from a folder and want to use as needed. But can't do it by following methods. What I am doing? this:

import * as imageSrc from '../img';
let imageUrl = [];
    imageSrc.map(
    imageUrl.push(img) 
    ))

I am getting this error in console.log

index.js:1452 ./src/components/Main.jsx
Module not found: Can't resolve '../img' in 'G:\Projects\Personal\Portfolios\Portfolio_Main\React_portfolio\portfolio\src\components'

Folder Structure:

src>
  components>
    Main.jsx
  img>
    [all image files]

are you using webpack to build the code? – Brandon Dec 13 '18 at 13:12 — Brandon, Dec 13 '18 at 13:12
yes, I am using webpack by default. – Chetan Kumar Dec 14 '18 at 09:30 — Chetan Kumar, Dec 14 '18 at 09:30

score 29 · Accepted Answer · answered Dec 13 '18 at 13:14

29

This is not possible in plain javascript because import/export are determined statically.

If you are using webpack, have a look at require.context . You should be able to do the following:

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

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

ref: https://webpack.js.org/guides/dependency-management/#require-context

answered Dec 13 '18 at 13:14

Mosè Raguzzini

15,399
1
31
43

3

How to use webpack in react? – Chetan Kumar Dec 13 '18 at 13:26
Did you have generated your app via create-react-app CLI ? – Mosè Raguzzini Dec 13 '18 at 13:32
yes, Webpack is default. but how to load images to array after importing them? – Chetan Kumar Dec 13 '18 at 14:46
In the snippet 'images' variable contains an array of images path resolved by webpack – Mosè Raguzzini Dec 13 '18 at 15:07
it does't return any array. it returns object with empty array! – Chetan Kumar Dec 14 '18 at 09:37
If array is empty parameters are wrong, what's your first parameters of require.context() ? where is the folder containing the images ? – Mosè Raguzzini Dec 14 '18 at 09:43
https://stackoverflow.com/questions/53777194/webpack-dynamic-import-method-returns-empty-array-instead-of-files-in-reactjs-h – Chetan Kumar Dec 14 '18 at 09:50
@Chetankumar yes is the same as the WebPack doc, I use it in some project so I can confirm it works if configuration is fine – Mosè Raguzzini Dec 14 '18 at 10:00
I have linked the path of question. Can you please review that? – Chetan Kumar Dec 14 '18 at 10:07
Done, try that, it seems the folder in the first parameter is wrong, try to read documentation linked here, commented examples are provided – Mosè Raguzzini Dec 14 '18 at 10:16

How to import all images from a folder in ReactJS?

1 Answers1

Linked