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

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;

这是我在运行:

时得到的错误

服务器错误 TypeError: src.startsWith 不是一个函数

请帮忙

Answer 1

在您的情况下，

img 不是 string。它是一个对象，上面有一个属性 img。所以它看起来像这样：img.img。你可以这样传递：

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

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

How to pass img src as a parameter in a stateless function in next js?

javascript

parameters

function

reactjs

next.js