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

index.js：

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

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

index.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个案例的例子

Answer 2

哦，我刚刚找到了这样的方法：

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

但我不确定这是不是一个好方法？在 jsx 中使用 require 的语法是什么？我可以知道为什么在这里使用 require 有任何解释吗？