React JS：如何将静态文件传递到前端（Django、React、Webpack）+（没有为 .MP4 文件配置加载器）答案

【问题标题】：React JS: How to pass static files to front-end (Django, React, Webpack) + ( no loaders are configured for .MP4 files )React JS：如何将静态文件传递到前端（Django、React、Webpack）+（没有为 .MP4 文件配置加载器）
【发布时间】：2021-01-23 09:55:37
【问题描述】：

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

这是我的项目结构：

您还可以看到我现在拥有的 webpack 配置。

但我的问题是如何传递静态文件来响应 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;

【问题讨论】：

标签： javascript reactjs django webpack

【解决方案1】：

如错误所述，您没有合适的加载程序来导入 mp4 文件。您可以将视频保存在 public folder 中，并在您的代码中访问它们。您需要的是PUBLIC_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>

【讨论】：