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

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

.....

我可以知道做这件事的好方法吗？如何避免逐个导入图像？以及如何获取文件夹中图像文件的总数

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

如何循环它们？我尝试使用模板字符串，但它以字符串not variable结尾，所以仍然无法工作。非常感谢你

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

注意3）案例图像不会由网页包加载程序处理。在前两种情况下，您需要为FileLoader添加规则。你可以在

上找到3个案例的例子哦，我刚刚找到了这样一种方法：

const slides=Array（6）.fill（）.map（（项目，i）=>(
));

---

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

非常感谢！我可以知道如何获取文件夹中图像文件的总数吗？

array.length

？）谢谢！因此，导入数组中的所有图像，然后使用.length right？const slides=array（6）.fill（）.map（（项目，i）=>（../assets/优惠券/优惠券${i+1}.png）}className=“slide”/>）；我可以知道这里需要什么吗？它也是来自网页包吗？非常感谢你！它有用吗？只有动态导入可以在（函数的）范围内@deatangel908是的，它可以工作，但我不知道为什么我们在这里使用require？我想需要的是nodejs还是webpack方式？我可以知道有没有一种方法可以通过这种方式获取文件编号？所以我不需要使用数组（特定的数字）.fill（）。谢谢，这里运行的是muchNo节点。节点仅为webpack供电，webpack不运行源文件，它只处理它们。这意味着webpack默认使用commonJs解析策略，请注意它与ES6/TS/ES3 syntaxt（导入/要求等）无关。它到底在查找什么，需要在源代码中找到，并从中生成网页包模块，在之前通过加载程序运行它们。