react项目中，我要从全局获取一个ImagesConfig.image01.url的图片地址，然后加载出来，但是一直无效

Question

我要从全局获取一个ImagesConfig.image01.url的图片地址，然后图片地址赋值给image01，然后再把image01赋值给imgUrl，但是图片无法加载，请问怎么解决？

render() {
        var divStyle = {
            position: 'absolute',
            top: 0,
            left: 0,
            width:1920,
            height: 1080
        }
        console.log(ImagesConfig.image01.url)
        //var image01 = ImagesConfig.image01.url;
        var image01 = '../../../../public/imagesConfig/images/slide1.jpg';
        var imgUrl = require(image01);
        //var imgUrl = require(image01);

        return (

            <div className={"slider"} style={divStyle}>


                <ul className={"slider-main"}>
                    <li className={"slider-panel"}>
                        <img src={imgUrl}></img>
                    </li>
                    <li className={"slider-panel"}>
                        <img src={require('../../../../public/imagesConfig/images/slide2.jpg')}></img>
                    </li>
                    <li className={"slider-panel"}>
                        <img src={require('../../../../public/imagesConfig/images/slide3.jpg')}></img>
                    </li>
                    <li className={"slider-panel"}>
                        <img src={require('../../../../public/imagesConfig/images/slide4.jpg')}></img>
                    </li>
                    <li className={"slider-panel"}>
                        <img src={require('../../../../public/imagesConfig/images/slide4.jpg')}></img>
                    </li>
                    <li className={"slider-panel"}>
                        <img src={require('../../../../public/imagesConfig/images/slide4.jpg')}></img>
                    </li>
                </ul>
                <div className={'slider-extra'}>
                    <ul className={'slider-nav'}>
                        <li key="0" className={'slider-item'}>1</li>
                        <li key="1" className={'slider-item'}>2</li>
                        <li key="2" className={'slider-item'}>3</li>
                        <li key="3" className={'slider-item'}>4</li>
                        <li key="4" className={'slider-item'}>5</li>
                        <li key="5" className={'slider-item'}>6</li>
                    </ul>
                    <div >
                        <a  href="javascript:;;"></a>
                        <a href="javascript:;;"></a>
                    </div>
                </div>
            </div>
            )
    }

Answer 1

require里的参数必须是静态字符串，不能是变量