How to use url-loader import multiple images in webpack?

Question

My webpack config:

{ test: /\.(png|jpg)$/, loader: 'url?limit=8192' }

In my project, I must import images like this:

import homeBg1 from './image/homeBg1.jpg';
import homeBg2 from './image/homeBg2.jpg';
import homeBg3 from './image/homeBg3.jpg';

The operating is cumbersome, who can give me some advice?Thx!

DarkMikey · Accepted Answer · 2022-03-03 09:58:50Z

7

This code will import all *.jpg files from image folder:

var requireContext = require.context("./image", true, /^\.\/.*\.jpg$/);
requireContext.keys().map(requireContext);

DarkMikey

4021 gold badge5 silver badges25 bronze badges

answered May 19, 2016 at 7:48

Bob Sponge

4,7481 gold badge25 silver badges25 bronze badges

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

1 Comment

Perfect! Thank you so much.