1 回答

TA貢獻1880條經驗 獲得超4個贊
問題是您嘗試在運行時導入圖像。你寫的,你用過的src={require('../../../../assets/items/nike.jpg')},它奏效了。但是這段代碼不起作用。
是的,您不會在瀏覽器控制臺中出現錯誤,但圖像也不會加載。因為require()函數返回一個Promise. 在這種情況下,您將在瀏覽器中擁有:
<img src="[object Promise]" alt="Nike image">
您可以通過將items.json文件從更改json為js并在此處導入圖像來解決此問題。
import NikeImage from "../../../../assets/items/nike.jpg";
export const items = [
{
"title": "Nike shoes",
"description": "New nike shoes",
"price": "40$",
"image": NikeImage,
"rank": "2"
}
]
并在您的組件中進行一些更改:
<img src={item.image} alt="Nike image" />
但是這個代碼只有file-loader在你的 webpack 配置中使用時才有效。
如果您必須僅使用json文件或從服務器獲取此信息。您應該使用CopyWebpackPlugin。如果您使用create-react-app(正如您在評論中所寫),它已經包含CopyWebpackPlugin并復制您的public文件夾。在這種情況下,只需將您的assets文件夾移動到public并更改您的items.json文件
...
"price": "40$",
"image": "/assets/items/nike.jpg",
...
和你的組件:
<img src={item.image} alt="Nike image" />
添加回答
舉報