HcHJQ
2022-03-10 10:00
采纳率: 100%
浏览 24

React 动态require请求本地资源

问题遇到的现象和发生背景

框架:React+Flask

我有两个页面:A页面传递一个参数(音频文件名)给B页面,B页面将拿到的这个参数拼接成路径,并通过video-react组件渲染。现在的问题是require不接受变量,并报
Error: Cannot find module '../../replay_data/replay_2022-03-09_18_24_23.mp4'的错误。

问题相关代码,请勿粘贴截图

B页面取得A页面传参:

constructor(props) {
        super(props);
        this.state = {
            collapsed: true,
            replay_filename : '',
            filepath : "../../replay_data/" + props.location.state.filename,
            filename : props.location.state.filename
        };
}

渲染video-react组件:

<Player
                        ref  ={c => {
                            this.player = c;
                        }}
                        poster="https://video-react.js.org/assets/poster.png"
                    >
                        <source
                            src={require( this.state.filepath ).default}
                            type="video/mp4"
                        />
                        <ControlBar autoHide={false} disableDefaultControls={false}>
                            <ReplayControl seconds={10} order={1.1} />
                            <ForwardControl seconds={30} order={1.2} />
                            <PlayToggle />
                            <CurrentTimeDisplay order={4.1} />
                            <TimeDivider order={4.2} />
                            <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
                            <VolumeMenuButton />
                        </ControlBar>
</Player>

3条回答 默认 最新

相关推荐 更多相似问题