如何将对象传递给组件后再赋值给Next.js Image组件的src属性

问题根源 #

你在index.js中传递icon参数时多套了一层对象：{myIcon}是对象简写语法，等价于{myIcon: myIcon}，因此你传递到TripleCard组件的cardData.icon实际是一个包含myIcon属性的对象，而非图片资源本身，所以next/image识别不到合法的src值。

修复方案 #

方案一（推荐，简化参数结构） #

修改index.js的传参逻辑，去掉icon外层的多余花括号，同时给next/image补充必填的alt属性避免后续报错：

// 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}
          alt="图标" // 可替换为对应业务含义的文本
        />
    )
}

方案二（适配嵌套对象结构） #

如果你确实需要保留当前嵌套对象的传参结构，直接修改tripleCard.js的src取值逻辑即可：

// tripleCard.js 适配嵌套结构的代码
import Image from 'next/image'

export default function TripleCard({ cardData }) {
    return(
        <Image 
          src={cardData.icon.myIcon} 
          height={cardData.size}
          alt="图标"
        />
    )
}

内容的提问来源于stack exchange，提问作者engineer-x