React.js 传递图像链接不起作用

Question

如前所述，我试图传递来自互联网的图像链接。

当我这样做时，代码不会报错，但无法加载图像：

父组件：

function App() {

  return (

    <div className="App">

      <Header imgLink="https://i.ibb.co/Q6q5F3x/profile.png" />

    </div>

  );

}

子组件：

const Header = (imgLink) => {

    return(

        <div className="header">

            <img className="profile-pic" src={imgLink} alt="Profile Pic"/>

        </div>

    );

}

当我简单地使用图像链接作为 img src 而不是从父组件传递下来时，它会起作用；但我仍然希望它从父母那里传下来。

任何见解都会有所帮助！谢谢

Answer 1

您需要销毁 Header 组件中的参数。const&nbsp;Header&nbsp;=&nbsp;({imgLink})&nbsp;=>否则它只是一个道具对象：const&nbsp;Header&nbsp;=&nbsp;(props)&nbsp;=>&nbsp;{console.log(props.imgLink)}