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="mr.whiskaz@catnap.meow"
            />
    )
}

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

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

Answer 2

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 component 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" />

Answer 3

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

Answer 4

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 component.

App.js:-

import whiskerson from "../src/images/card-pic1.png"   
    
<Contact
  img={whiskerson}
  name="Mr. Whiskerson"
  phone="(111) 111-1111"
  email="mr.whiskaz@catnap.meow"
/>

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

Answer 5

I know this question is coming 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 component 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="mr.whiskaz@catnap.meow"
/>

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="mr.whiskaz@catnap.meow"
/>

Answer 6

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 7

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="mr.whiskaz@catnap.meow"
            />
    )
}

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.

Answer 8

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