Блог

Я использую комбинацию Django react js webpack для создания своего приложения, и я все еще новичок в react js и webpack, поэтому я понятия не имею, как размещать или передавать файлы во внешний интерфейс. Итак, в основном я не передаю статические файлы через django, и у меня нет никакой конфигурации для статических файлов в django. Я пытаюсь передать статические файлы, которые находятся в главном каталоге react js.

Это структура моего проекта:

И вы также можете увидеть конфигурацию webpack, которая у меня есть прямо сейчас.

Но мой вопрос в том, как мне передавать статические файлы в 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;
  

Как указано в ошибке, у вас нет подходящего загрузчика для импорта mp4 файлов. Вы можете сохранять свои видео в общедоступной папке и получать к ним доступ в своем коде. Что вам нужно 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>