Any easy way to import multiple image files at once in react

Question

I type the following for importing images. Need a short way to do this.

import banner1 from "./imgs/Banners/banner1.jpg"
import banner2 from "./imgs/Banners/banner2.jpg"
import banner3 from "./imgs/Banners/banner3.jpg"
import banner4 from "./imgs/Banners/banner4.jpg"
import banner5 from "./imgs/Banners/banner5.jpg"
import banner6 from "./imgs/Banners/banner6.jpg"
import banner7 from "./imgs/Banners/banner7.jpg"
import banner8 from "./imgs/Banners/banner8.jpg"
import banner9 from "./imgs/Banners/banner9.jpg"
.
.
.
import banner(n) from "./imgs/Banners/banner(n).jpg"

did you check https://stackoverflow.com/questions/52956474/create-a-loop-to-import-files-dynamically-in-react ? — iamhuynq, Oct 22 '20 at 08:29
This has nothing to do with react but is actually concerning the bundler that you use. What bundler do you use? parcel, webpack, rollup, etc? — hackape, Oct 22 '20 at 08:29
An easy way is put all your image in public folder. then use as `src='path/from/public/to/img'`. Needn't import them. — Hung.LK, Oct 22 '20 at 10:08

koko-js478 · Accepted Answer · 2020-10-22T08:52:10.060

Since you are using webpack, have a look at require.context . You should be able to import all png files in './imgs/Banners' to images variable. Then you can use image by images["banner(n).png"].

function importAll(r) {
    let images = {};
    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
    return images;
}

const images = importAll(require.context('./imgs/Banners', false, '/\.jpg/'));

<img src={images["banner1.png"]} />

In another way, you can use a file dedicated to these imports :

images.js :

import banner1 from "./imgs/Banners/banner1.jpg"
import banner2 from "./imgs/Banners/banner2.jpg"
import banner3 from "./imgs/Banners/banner3.jpg"
import banner4 from "./imgs/Banners/banner4.jpg"
import banner5 from "./imgs/Banners/banner5.jpg"
import banner6 from "./imgs/Banners/banner6.jpg"
import banner7 from "./imgs/Banners/banner7.jpg"
import banner8 from "./imgs/Banners/banner8.jpg"
import banner9 from "./imgs/Banners/banner9.jpg"
.
.
.
import banner(n) from "./imgs/Banners/banner(n).jpg"

export default [
    banner1,
    banner2,
    ...
];

Then import this array in one line in other files :

import banners from './images';

Any easy way to import multiple image files at once in react

1 Answers1

Linked