Wie verwende ich den Pfad in der Require-Methode mit der Reaktion von node.js?

Question

Ich versuche, require() 方法将图片的路径粘贴到 img innerhalb des Tags zu verwenden.

Das ist die Komponente. Requisiten werden vom übergeordneten Element korrekt übergeben, da console.log(img) den richtigen Pfad zurückgibt.

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" />
        </>
    )
}

So sieht die JSON-Datei aus.

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

Ich bin sicher, dass alle Ordnerpfade korrekt sind.

Ich habe versucht, den Pfad einzufügen 并且正在工作。但是， 或 ${img})} alt="sth"/ > Es hat funktioniert.

Ich habe auch versucht, die JSON-Datei in "img": require("../photo/photo.jpeg") zu ändern, aber dann habe ich einen JSON-Dateifehler erhalten.

Es erscheint ein Fehler找不到模块'../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 文件中，您只需提供公共目录的路径。