Javascript React-JS：如何将静态文件传递到前端（Django、React、Webpack）+；（没有为.MP4文件配置加载程序）

我正在使用Django+react js+webpack的组合来构建我的应用程序，而我对react js和webpack仍然非常熟悉，因此我不知道如何将文件托管或传递到前端。 所以基本上我不通过django传递静态文件，并且我没有django中静态文件的任何配置。我正在尝试传递react js主目录中的静态文件

这是我的项目结构：

你也可以看到我现在的网页配置

但我的问题是，我必须如何传递静态文件才能做出反应

我的代码：

import React from 'react';
import Video from '../videos/video.mp4';
import {
    HeroContainer,
    HeroBg,
    VideoBg
} from './HeroElements';

const HeroSection = () => {
    return (
        <HeroContainer>
            <HeroBg>
                <VideoBg
                    /*src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" */
                    src={Video}
                    type="video/mp4"
                    autoPlay
                    loop
                    muted
                />

            </HeroBg>
        </HeroContainer>
    )
}

export default HeroSection;

从“React”导入React；
从“../videos/Video.mp4”导入视频；
进口{
HeroContainer，
HeroBg，
视频背景
}来自“./HeroElements”；
常量节=（）=>{
返回(
)
}
导出默认值部分；

正如错误所述，您没有合适的加载程序来导入

mp4

文件。您可以将视频保存在中，并在代码中访问它们。您需要的是

PUBLIC\u URL

环境变量，其值由

react scripts

管理

<video width={320} height={240} controls>
  <source src={process.env.PUBLIC_URL + '/movie.mp4'} type="video/mp4">
  Your browser does not support the video tag.
</video>

您的浏览器不支持视频标记。