我正在嘗試使用 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"
}
]
我確信所有資料夾路徑都是正確的。
我嘗試貼上路徑 ![sth]({require"../photo/photo.jpeg"})
或
${img}
)} alt="sth"/ > 可以。
我還嘗試將 json 檔案更改為 "img": require("../photo/photo.jpeg") 但隨後出現 json 檔案錯誤。
彈出錯誤找不到模組'../photo/photo.jpeg'。
參考下面的帖子，我透過將
.json文件更改為.js文件，找到了一個更簡單的解決方案。然後，按照帖子的建議，我將數據轉換為：const data = [ { id: 1, img: require("../photo/photo.jpeg") } ] export default data;然後在元件中，我只使用了
#如何在 require 中使用範本文字？ (require(`${somePath}`))
此錯誤與 React 底層的 webpack 如何與
require()函數配合使用有關。require()不是標準的 JavaScript 函數，而是 Node.js 和 webpack 提供的功能。require()在建置過程中執行模組的同步讀取，這意味著 webpack 需要在建置時（應用程式執行之前）而不是執行時間了解模組之間的依賴關係。因此，當您直接使用
require("../photo/photo.jpeg")時，webpack 知道將此檔案包含在建置套件中，因為路徑是靜態的，而不是動態的。但是，當您嘗試使用require(img)時，webpack 在程式碼運行之前並不知道您所引用的文件，但為時已晚。在這種情況下，我建議兩個可能的解決方案：
#這是現代 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 &&
}
);
}請注意，您需要在 JSON 檔案中提供專案根目錄的相對路徑才能正常運作。
create-react-app，則可以將映像放入公用資料夾中。然後，您可以透過相對於公用資料夾的路徑來引用這些圖像：function BlogPost(props) { const { img } = props; return ( <>
);
}請注意，在 JSON 檔案中，您只需提供公共目錄的路徑。