时间戳

首页 > 解决方案 > 如何从 React 中的 JSON 文件正确加载图像/视频路径？

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

问题描述

当前不起作用的解决方案

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() 中使用变量名。甚至不适用${}

标签： reactjs

解决方案

为了能够使用资产，您必须

要求

或者

进口

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

如果你 console.log(path) 它是一个纯字符串而不是资产。

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

概括：

当您只编写一个没有导入/要求的源文件字符串时，您必须确保资产位于您的公共/服务器文件夹中的该路径。如果我可以假设您使用 webpack，那么它所做的就是当您需要/导入某些内容时，它会将其范围限定到您的构建文件夹中，以便可以从您的 web 客户端访问它并将其引用到正确的路径，例如https:// domain.example/public/your-asset.mp4

工作解决方案：

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>

推荐阅读