如何在一个对象传递到组件然后src图像?

Question

我想传入一个对象作为属性，但我遇到了这个错误:

未处理的运行时错误错误:缺少所需的图像"src"财产。确保你通过了"在道具>next/image组件。收到:{}

我试过使用…

我使用Next JS与材料UI。以下是我正在研究的一个精简版本，只有相关的部分。

看到myIcon正在向下传递。

index.js

import myIcon from '../public/icon.png' 
import TripleCard from './tripleCard'
<TripleCard cardData={{ icon: {myIcon}, size: "100px" }}></TripleCard>

tripleCard.js

import Image from 'next/image'
export default function TripleCard({ cardData }) {
return(
<Image src={cardData.icon} height={cardData.size}/>
)
}

Answer 1

我想你应该检查你的目录是否有myIcon。

Answer 2

我查看了控制台中的对象，并意识到图像对象嵌套在Icon对象中。

我的想法:

cardData
|_ icon 

现实:

props
|_ cardData 
|__ icon 
|___ myIcon

所以tripleCard.js应该是这样的:

import Image from 'next/image'
export default function TripleCard({ props }) {
return(
<Image src={props.cardData.icon.myIcon} height={props.cardData.size}/>
)
}