如何在 require 方法中使用路径与node.js 反应？

Question

我正在尝试使用 require() 方法将图片的路径粘贴到 img 标记内。

这是组件。道具从父级正确传递，因为 console.log(img) 返回正确的路径。

import data from '../asset/data/blog-post.json'

function BlogPostFeed() {
    const post = data.map(item => {
        return <BlogPost
            key={item.id}
            img={item.img}
        />
    })
    return (
        <>
            {post}
        </>
    )
}

function BlogPost(props) {
    const { img } = props;
    return (
        <>
            <img src={require(img)} alt="photo" />
        </>
    )
}

这就是 json 文件的样子。

[ 
 {
        "id": 1,
        "img": "../photo/photo.jpeg"  
 }
]

我确信所有文件夹路径都是正确的。

我尝试粘贴路径 并且正在工作。但是， 或 ${img})} alt="sth"/ > 可以。

我还尝试将 json 文件更改为 "img": require("../photo/photo.jpeg") 但随后出现 json 文件错误。

弹出错误找不到模块'../photo/photo.jpeg'。

Answer 1

参考下面的帖子，我通过将 .json 文件更改为 .js 文件，找到了一个更简单的解决方案。然后，按照帖子的建议，我将数据转换为：

const data = [ 
  {
    id: 1,
    img: require("../photo/photo.jpeg")  
  }
]
export default data;

然后在组件中，我只使用了

如何在 require 中使用模板文字？ (require(`${somePath}`))

Answer 2

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

因此，当您直接使用 require("../photo/photo.jpeg") 时，webpack 知道将此文件包含在构建包中，因为路径是静态的，而不是动态的。但是，当您尝试使用 require(img) 时，webpack 在代码运行之前并不知道您所引用的文件，但为时已晚。

在这种情况下，我建议两种可能的解决方案：

1. 使用动态导入：

这是现代 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. 使用公共文件夹提供图像： 如果您使用 create-react-app，则可以将图像放入公共文件夹中。然后，您可以通过相对于公共文件夹的路径来引用这些图像：

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

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