如何在 require 方法中使用路径与node.js react

这个错误与webpack如何使用require()函数有关，这是react 的基础.require()不是标准的JAVASCRIPT函数，而是Node.js和webpack提供的功能.require()在构建过程中执行模块的同步读取，这意味着webpack需要在构建时(应用程序运行之前)了解模块之间的依赖关系，而不是在运行时.

因此，当您直接使用require("../photo/photo.jpeg")时，webpack知道要将该文件包括在构建包中，因为路径是静态的，而不是动态的.然而，当你try 使用require(img)时，webpack直到代码运行时才知道你指的是什么文件，这已经太晚了.

在这种情况下，我会提出两种可能的解决方案:

1. Using dynamic imports:个

这是现代JAVASCRIPT提供的功能，webpack也支持.下面是如何在您的组件中使用它:

import React, { useState, useEffect } from 'react';

function BlogPost(props) {
    const { img } = props;
    const [imgSrc, setImgSrc] = useState();

    useEffect(() => {
        import(`../${img}`)
        .then((image) => setImgSrc(image.default))
        .catch((err) => console.error(err));
    }, [img]);

    return (
        <>
            {imgSrc && <img src={imgSrc} alt="photo" />}
        </>
    );
}

请注意，您需要在JSON文件中提供项目根目录的相对路径，这样才能正常工作.

1. Using public folder to serve the images: 如果你用的是create-react-app，你可以把你的图片放在公共文件夹里.然后，您可以通过它们相对于公用文件夹的路径来引用这些图像:

function BlogPost(props) {
    const { img } = props;
    return (
        <>
            <img src={process.env.PUBLIC_URL + '/photo/photo.jpeg'} alt="photo" />
        </>
    );
}

请注意，在您的JSON文件中，您只需要提供公共目录的路径.