Local image not loading when using props in reactjs - 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 :)