Question

当前无效的解决方案

render() {
    let path = '../../../public/video/2-twinkle.mp4'
    return (
         <video className={classes.headerVideo} loop muted autoPlay>
                <source src={require(`${path}`)} type="video/mp4"></source>
                Your Browser does not support HTML5 Video!
            </video>

不起作用？？但是，如果我只是使用

<source src={require(`${'../../../public/video/2-twinkle.mp4'}`)} type="video/mp4"></source>

它工作正常，所以路径正确。我只是不能在require（）中使用变量名。甚至不适用于${}

Answer 1

要使用资产，您必须

需要

或

导入

let path = '../../../public/video/2-twinkle.mp4'

如果您console.log（path）是纯字符串而不是资产。

您应该在文件顶部定义const path = require（'../../../ public / video / 2-twinkle.mp4'）以及要导入的其他资产。

摘要：


当您简单地编写源文件的字符串而没有导入/要求时，必须确保资产位于public / server文件夹中的该路径中。如果我可以假设您使用的是webpack，那么它的作用就是当您需要/导入某些东西时，它将它的作用域限定在您的构建文件夹中，以便可以从您的web客户端访问它并将它引用到正确的路径，例如{{3} }


工作解决方案：

import React from 'react';
const path = require('../../../public/video/2-twinkle.mp4');

    class Example extends from Component {
    render() {
        return (
             <video className={classes.headerVideo} loop muted autoPlay>
                    <source src={path} type="video/mp4"></source>
                    Your Browser does not support HTML5 Video!
                </video>

如何在React中从JSON文件正确加载图像/视频路径？

1 个答案: