How to display images using props in react?

Question

I'm new to React and I am following a tutorial. Right now I have the following code:

index.js:

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

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

App.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="[email protected]"
            />
    )
}

Contact.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 >
    )
}

All the files above are structured like this:

My problem is that I can't seem to display the images:

This is exactly how the tutorial has it, and I know the image directory is correct since if I hard code the directory for 'mr-whiskerson.png' on Contact component like this

..the image is displayed

So my question is, is there something I am missing? Do I need to use special syntax to display images that is not used to display paragraphs? I am honestly confused and I would really appreciate those who could help me understand. Thank you.

Answer 1

I don't think anyone here gets what you're trying to do. You want to inject images using props because that's the lesson you're learning, and not use 'import.' Try this:

1. move those images from the 'src' folder to the 'public' folder
2. when referencing the image in your 'App.js' file, make sure the path is relative to 'index.html' since that's where they are actually being displayed (i.e. img="./images/mr-whiskerson.png)
3. delete the 'imports' for all the images - you won't need them when using props for images

Answer 2

If you pass a path to component as a string, your component receive that relative path, but relative to parent component. It won't work.

You should import path to image in import section in App.js:

import Contact from "./components/Contact"
import yourImage from "../images/mr-whiskerson.png";

export default function App() {
    return (
        <div className="contacts">
            <Contact
                img={yourImage}
                name="Mr. Whiskerson"
                phone="(111) 111-1111"
                email="[email protected]"
            />
    )
}

in such a case your path will be passed in another components correctly as a pointer (in the level where it is should exist).

Leave Contact.js file as it is, it should work.