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 "./ponents/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 ponent 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.

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 "./ponents/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 ponent 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.

• javascript
• html
• reactjs

• the code looks correct....try adding alt attribute to image – Naman Commented Feb 11, 2022 at 3:45
• I think your file path is wrong – Sukesh Commented Feb 11, 2022 at 3:47
• Check answer on the similar question: stackoverflow./questions/48385073/… – Alex Tom Commented Feb 11, 2022 at 3:53

8 Answers 8

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

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

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

import Contact from "./ponents/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 ponents correctly as a pointer (in the level where it is should exist).

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

I know this question is ing from the Scrimba React course. I also got stuck on the same issue. So, after experimenting for hours, I found the solution to it.

Actually, the ponent is rendered inside index.html So, the path of the images folder should be relative to index.html

If your index.html is in the root folder, the props would be:

<Contact
     img="./src/images/mr-whiskerson.png"
     name="Mr. Whiskerson"
     phone="(111) 111-1111"
     email="[email protected]"
/>

If index.html is in the public folder, the props would be:

<Contact
     img="../src/images/mr-whiskerson.png"
     name="Mr. Whiskerson"
     phone="(111) 111-1111"
     email="[email protected]"
/>

I am also following the same tutorial and anything else, apart from this method, is not working for me.

So, you need to import your image file in App.js & then pass it as a prop in contact ponent.

App.js:-

import whiskerson from "../src/images/card-pic1.png"   
    
<Contact
  img={whiskerson}
  name="Mr. Whiskerson"
  phone="(111) 111-1111"
  email="[email protected]"
/>

Contact.js:-

import React from "react";
     
function Contact(propsName) {
  return (     
    <div className="outer--container">          
      <div className="card--container">
        <div className="card--design">
          <img src={propsName.img} alt="img" className="card--image"/>
          <p className="card--rating">{propsName.img_rating}</p>
          <p className="card--title">{propsName.img_title}</p>
          <h3 className="card--price">From ${propsName.img_price} / <span className="card--quantity">person</span></h3>
        </div> 
      </div>
    </div>         
  )
}
    
export default Contact

I solved this by moving the IMAGES folder to the PUBLIC folder.

in your structur folder images and App.js file in one structur, you just need pass the image url in App.js with

./images/phone-icon.png

I am currently doing the same Scrimba React course and was stuck on the same thing and this is what I did:

Majority of them told the correct answer to give the relative path of the image from index.html I was giving it from the ponent i was calling it from and that's wrong I hope Scrimba guides students on this. Doesn't matter where the pictures are but just give the relative address from index.html but I had mine in SRC folder.

This i how I wrote my code and also don't forget to use require as well.

<img src={require(`../src/Images/${props.item.coverImg}`)} alt={`./Images/${props.item.coverImg}`} className="mainPic" />

suppose your images are in image folder then u have to use props like this to pass image <img src={../images/${props.img}} here i have use backtick .And ../images defines the folder in which images are present ${props.img} is the syntax to pass the image using props