如何在 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 檔案中，您只需提供公共目錄的路徑。