React中如何通过require()动态更新图片路径实现图片轮播？

你遇到的这个报错，本质是Webpack的静态打包机制导致的——Webpack在编译阶段需要明确知道要打包的资源路径，直接把动态字符串传给require()的话，它没办法静态解析到具体的图片文件，自然就会提示找不到模块。尤其是你有90+张图片要轮播，更得用Webpack能识别的方式批量引入资源，下面给你两种针对性的解决方案：

方案一：预加载所有图片（适合图片数量不多的场景） #

先把所有图片用require()提前加载好存到数组里，这样Webpack编译时就能把这些图片都打包进去，后续直接从数组取就行，不用再动态require：

function About() {
    // 提前用require加载所有图片，Webpack会识别这些路径并打包
    const tempImg = [
        require('./img/Horseback-riding.jpg'),
        require('./img/Snowshoeing.jpg'),
        require('./img/yoga3.3.jpg'),
        require('./img/rope.jpg')
    ];

    const [counter, setCounter] = useState(3); // 初始值对应rope.jpg的索引
    const [aboutImg, setAboutImg] = useState(tempImg[3]);

    useEffect(() => {
        const interval = setInterval(() => {
            // 用函数式更新获取最新的counter值，避免闭包问题
            setCounter(prevCounter => {
                const nextCounter = prevCounter === tempImg.length - 1 ? 0 : prevCounter + 1;
                setAboutImg(tempImg[nextCounter]);
                return nextCounter;
            });
        }, 5000);

        return () => clearInterval(interval);
    }, []); // 空依赖，只创建一次定时器

    return (
       <img src={aboutImg} alt="轮播图" />
    );
}

export default About;

方案二：用require.context批量导入（适合90+图片的场景） #

如果有大量图片，手动写require太麻烦，可以用Webpack的require.contextAPI批量导入指定文件夹下的所有图片，自动帮你处理所有路径：

function About() {
    // 批量导入img文件夹下所有jpg图片
    // 参数说明：1. 目标文件夹；2. 是否遍历子文件夹；3. 匹配文件的正则
    const imgContext = require.context('./img', false, /\.jpg$/);
    // 将所有图片路径映射为加载后的资源
    const tempImg = imgContext.keys().map(key => imgContext(key));

    // 初始值设为rope.jpg的索引，确保默认显示正确图片
    const initialIndex = tempImg.findIndex(item => item.includes('rope.jpg'));
    const [counter, setCounter] = useState(initialIndex === -1 ? 0 : initialIndex);
    const [aboutImg, setAboutImg] = useState(tempImg[counter]);

    useEffect(() => {
        const interval = setInterval(() => {
            setCounter(prevCounter => {
                const nextCounter = prevCounter === tempImg.length - 1 ? 0 : prevCounter + 1;
                setAboutImg(tempImg[nextCounter]);
                return nextCounter;
            });
        }, 5000);

        return () => clearInterval(interval);
    }, [tempImg.length]); // 依赖图片数量，防止数量变化时出问题

    return (
       <img src={aboutImg} alt="轮播图" />
    );
}

export default About;

为什么你的原代码会报错？ #

Webpack是静态打包工具，它在编译时会扫描代码里的require调用，只有当路径是静态字符串（比如require('./img/rope.jpg')）时，它才能识别到对应的文件并打包。而你原代码里require(tempImg[counter])的路径是动态变量，Webpack无法提前知道要打包哪些图片，所以运行时就会提示“找不到模块”。

用预加载或require.context的方式，Webpack能在编译阶段就把所有需要的图片都纳入打包范围，运行时自然就能正常访问啦～

备注：内容来源于stack exchange，提问作者Emma