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吗？

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

2 个答案: