我在資產中有一個 data.js 檔案，它有一些帶有資訊的影像，但是當我嘗試將影像的路徑傳遞給道具時，我得到了上面的錯誤。我檢查了路徑，它作業正常。
這是 data.js
export const categories = [
{
id: 1,
title: "WOMEN",
img: "../../assets/women.jpg",
},
{
id: 2,
title: "MEN",
img: "../../assets/men.jpg",
},
{
id: 3,
title: "CHILDREN",
img: "../../assets/children.jpg",
},
];這是我的組件
import React from 'react'
const CategoryItem = ({item}) => {
return (
<div className='category-item-container'>
<img src={require( `${ item.img }`)} />
<p>
{item.img}
</p>
</div>
)
}
export default CategoryItemuj5u.com熱心網友回復：
在 React 中，我們希望將我們的檔案路徑存盤為變數，然后我們可以隨時將其注入到我們的 JSX 中。我會確保在匯出的陣列上方有匯入陳述句。這是帶有簡潔示例的 React 檔案。
https://create-react-app.dev/docs/adding-images-fonts-and-files/
uj5u.com熱心網友回復：
我的影像在我的 src 檔案中，所以我結束將它們移動到公共然后我更改了它們在資料中的路徑，而不是 img: "../../assets/women.jpg",我使用， img: "women.jpg",所以我不再需要使用 require 并且只是使用<img src={ item.img } alt='img' />
并且它作業正常。
uj5u.com熱心網友回復：
嘗試匯入您的影像
import women from "../../assets/women.jpg"
import men from "../../assets/men.jpg"
import children from "../../assets/children.jpg"
export const categories = [
{
id: 1,
title: "WOMEN",
img: women,
},
{
id: 2,
title: "MEN",
img: men,
},
{
id: 3,
title: "CHILDREN",
img: children,
},
];
const CategoryItem = ({item}) => {
return (
<div className='category-item-container'>
<img src={item.img} />
<p>
{item.img}
</p>
</div>
)
}
export default CategoryItem
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/386080.html
標籤：反应