Local image not loading when using props in reactjs

Question

I'm following a tutorial and I'm learning about props right now. I'm trying to use props to for my images' url's but they are not loading.

This is the code for my App.js:

import './App.css';
import Nav from './Components/Nav/Nav';
// import Main from './Components/Main/Main';
import Card from './Components/Card/Card';


function App() {
  return (
    <div className="App">
      <Nav />
      {/* <Main /> */}
      <Card 
      img="image 12.png"
      rating="5.0"
      reviewCount={6}
      country="USA"
      title="Life Lessons with Katie Zaferes"
      price={136}
      />
    </div>
  );
}

export default App;

And this is the code for my Card.js:

import React from "react";
import './Card.css'
import star from '../../images/Star 1.png'


export default function Card({
    img, rating, reviewCount, country, title, price}) {
    return (
        <div className="bottom">
            
            <img className="image" src={`../../images/${img}`} />
            {/* <p className="availability">SOLD OUT</p> */}
            
            <div className="stats">
                <img className="star" src={star}></img>
                <span>{rating}</span>
                <span className="gray"> {reviewCount} • </span>
                <span className="gray">{country}</span>
            </div>
            
            <p className="text1">{title}</p>
            <p className="text2"><span className="bold">
                From ${price}</span> / person
            </p>
        </div>
    )
}

What should I do so that my pictures load?

Answer 1

First you need to import the local image instead of the url (the same way you did with star in Card.js)

import Nav from './Components/Nav/Nav';
import Card from './Components/Card/Card';
import image from "../../images/image 12.png" //this


function App() {
  return (
    <div className="App">
      <Nav />
      {/* <Main /> */}
      <Card 
      img={image}
      rating="5.0"
      reviewCount={6}
      country="USA"
      title="Life Lessons with Katie Zaferes"
      price={136}
      />
    </div>
  );
}

export default App;

and then you just pass the prop to the "src" of image

export default function Card({
    img, rating, reviewCount, country, title, price}) {
    return (
        <div className="bottom">
            
            <img className="image" src={img} />
            {/* <p className="availability">SOLD OUT</p> */}
            
            <div className="stats">
                <img className="star" src={star}></img>
                <span>{rating}</span>
                <span className="gray"> {reviewCount} • </span>
                <span className="gray">{country}</span>
            </div>
            
            <p className="text1">{title}</p>
            <p className="text2"><span className="bold">
                From ${price}</span> / person
            </p>
        </div>
    )
}

this is because when using webpack you need to require the images so that webpack can load them.

alternatively, if you want the images to be loaded dynamically depending on a string you could leave the code as before and just replace the image src with an import

 <img className="image" src={require (`../../images/${img}`)} /> 

or

 <img className="image" src={require (`../../images/${img}`).default} /> 

I hope you have a nice day and it works for you :)