Comment utiliser le chemin dans la méthode require avec node.js React ?

Question

J'essaie d'utiliser require() 方法将图片的路径粘贴到 img à l'intérieur de la balise.

C'est le composant. Les accessoires sont transmis correctement par le parent car console.log(img) renvoie le chemin correct.

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

Voici à quoi ressemble le fichier json.

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

Je suis sûr que tous les chemins de dossiers sont corrects.

J'ai essayé de coller le chemin 并且正在工作。但是， 或 ${img})} alt="sth"/ > Cela a fonctionné.

J'ai également essayé de changer le fichier json en "img": require("../photo/photo.jpeg") mais j'ai ensuite eu une erreur de fichier json.

Une erreur apparaît找不到模块'../photo/photo.jpeg'.

Answer 1

En vous référant au post ci-dessous, j'ai trouvé une solution plus simple en convertissant le fichier .json 文件更改为 .js. Ensuite, comme le suggère le message, j'ai converti les données en :

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

Puis dans le composant que je viens d'utiliser

Comment utiliser les littéraux de modèle dans require ? (exige(`${somePath}`))

Answer 2

Ce bug est lié à la façon dont le webpack sous-jacent de React require() 函数配合使用有关。 require() 不是标准的 JavaScript 函数，而是 Node.js 和 webpack 提供的功能。 require() effectue des lectures synchrones des modules pendant le processus de construction, ce qui signifie que le webpack doit connaître les dépendances entre les modules au moment de la construction (avant l'exécution de l'application) plutôt qu'au moment de l'exécution.

Ainsi, lorsque vous utilisez require("../photo/photo.jpeg") 时，webpack 知道将此文件包含在构建包中，因为路径是静态的，而不是动态的。但是，当您尝试使用 require(img) directement, webpack ne connaît pas les fichiers auxquels vous faites référence jusqu'à ce que le code soit exécuté, mais il est trop tard.

Dans ce cas je vous propose deux solutions possibles :

1. Utiliser l'importation dynamique :

Il s'agit d'une fonctionnalité fournie par JavaScript moderne et webpack la prend également en charge. Voici comment vous l'utilisez dans votre composant :

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

Veuillez noter que vous devez fournir un chemin relatif vers la racine du projet dans le fichier JSON pour que cela fonctionne correctement.

1. Servir des images à l'aide d'un dossier public : Si vous utilisez create-react-app, vous pouvez placer des images dans un dossier public. Vous pouvez ensuite référencer ces images via des chemins relatifs au dossier public :

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

Veuillez noter que dans le fichier JSON, il vous suffit de fournir le chemin d'accès au répertoire public.