在 React 的文件夹中循环所有图像的好方法是什么？

Question

I have some images in a folder and I try to loop it. For example, a folder named "coupons" has some images like "coupon1.png","coupon2.png","coupon3.png".... Then in one component, I try to make a function to import all the images and return

<img src={coupon1} alt='coupon1' className="slide" />
<img src={coupon2} alt='coupon2' className="slide" />
<img src={coupon3} alt='coupon3' className="slide" />
.....

May I know what would be a good way to do this? How to avoid import images one by one? And how to get the total number of the images files in the folder?

import coupon1 from '../assets/coupons/coupon1.png';
import coupon2 from '../assets/coupons/coupon2.png';
import coupon3 from '../assets/coupons/coupon3.png';
...

And how to loop them? I tried to use template string but it ends with string not variable so still not work. Thank you so much!

Answer 1

You have 3 options:

1) You can use webpack and generate alias with file list.

webpack.config.js :

const webpack = require('webpack');
const child_process = require('child_process');
let stdout = child_process.execSync("find . -regex  '.*\\(png\\|jgeg\\)$'", {encoding: 'utf8'});
let files = stdout.split('\n');


module.exports = {
    plugins = [
        new webpack.DefinePlugin({
            IMAGES: JSON.stringify(files),
        }),
    ];
} 

index.js :

Promise.all(
    files.map(a => import(a))
).then(
    filesSources => console.log(`DO something with array: ${filesSources}`)
);

2) You can require images with context:

index.js :

list = require.context('./', false, /\.(png|jpeg)$/);

3) You can use copyWebpackPLugin if you don't need to work with sources:

webpack.config.js :

const CopyWebpackPlugin = require('copy-webpack-plugin');
new CopyWebpackPlugin([
  {from: './src/assets/images', to: 'images'},
 ]),

Note in 3) case image won't be processed by webpack loaders chain. In first 2 cases you need to add rule for FileLoader. You can find example of 3 cases at https://github.com/akoidan/pychat/tree/master/fe

Answer 2

Oh and I just found a way like this:

const slides = Array(6).fill().map((item, i) => (
            <img key={i} src={require(`../assets/coupons/coupon${i + 1}.png`)} className="slide" />
        ));

but I'm not sure is this a good way to do this? And what is this syntax of using require inside jsx? May I know is there any explanation about why using require here?