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条回答 默认 最新

  • iloveozz 2022-03-10 10:23
    关注

    智利队src就可以了啊,不用require吧

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 3月18日
  • 已采纳回答 3月10日
  • 创建了问题 3月10日

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 MATLAB动图问题
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名