如何将img src作为参数传递到next js中的无状态函数中

Question

我想在next js中的无状态函数中传递img src作为参数。这是我的组件文件：

import styles from "../../styles/modules/Card.module.css"
import Image from "next/image"

const Activity = (img) => {

return ( <>
<div className={styles.card} id="blue">
<Image className={styles.card_img} src={img} width={160} height={360} />
</div>

</> );
}

export default Activity;

还有被调用的文件：

import Activity from "../../components/Lists/Activity"

const About = () => {
return ( <>    
<Activity img="https://placekitten.com/289/220"/>
</>);
}

export default About;

这是我在运行时遇到的错误：

服务器错误类型错误：src.startsWith不是函数

请帮助

Answer 1

img在您的情况下不是字符串。它是一个属性为img的对象。所以它看起来像这样：img.img。你可以这样传递：

<Image className={styles.card_img} src={img.img} width={160} height={360} />