如何在react中使用道具显示图像?

指数js:

import ReactDOM from "react-dom"
import App from "./App"

ReactDOM.render(
    <App />,
    document.getElementById("root")
)

应用程序。js:

import Contact from "./components/Contact"
export default function App() {
    return (
        <div className="contacts">
            <Contact
                img="../images/mr-whiskerson.png"
                name="Mr. Whiskerson"
                phone="(111) 111-1111"
                email="mr.whiskaz@catnap.meow"
            />
    )
}

联系js:

import React from "react"
import ReactDOM from "react-dom"

export default function Contact(props) {
return (
        < div className="contact-card" >
            <img src={props.img} />
            <h3>{props.name}</h3>
            <div className="info-group">
                <img src="../images/phone-icon.png" />
                <p>{props.phone}</p>
            </div>
            <div className="info-group">
                <img src="../images/mail-icon.png" />
                <p>{props.email}</p>
            </div>
        </div >
    )
}

以上所有文件的结构如下:

我的问题是,我似乎无法显示图像:

这正是本教程的内容,我知道图像目录是正确的,因为如果我硬编码“mr Whisson”的目录。png’在像这样的联系人组件上

显示图像