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

Question

我的文件夹中有一些图像，我尝试循环播放它。例如，一个名为“coupons”的文件夹有一些图像，如“coupon1.png”、“coupon2.png”、“coupon3.png”......然后在一个组件中，我尝试创建一个函数来导入所有图像并返回

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

我可以知道什么是一个好方法吗？如何避免一张一张导入图片？如何获取文件夹中图像文件的总数？

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

以及如何循环它们？我尝试使用模板字符串，但它以字符串结尾而不是变量，所以仍然不起作用。太感谢了！

Answer 1

您有 3 个选择：

1）您可以使用webpack并使用文件列表生成别名。

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),
        }),
    ];
} 

索引.js：

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

2）您可以要求带有上下文的图像：

索引.js：

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

3）如果您不需要使用源，您可以使用copyWebpackPLugin：

webpack.config.js：

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

注意 3) 中的情况图像不会被 webpack 加载器链处理。在前两种情况下，您需要为 FileLoader 添加规则。您可以在https://github.com/akoidan/pychat/tree/master/fe找到 3 个案例的示例