I'm following along with a Scrimba tutorial on React and I'm doing it on my own machine locally. I have an image in my images folder within my src folder. In my components folder I have a component called Card which is shown but why is my image only shown when I import it and not like the other two ways which are commented out?
Might be something stupid but I can't see it. Thanks all. Just for clarity everything else works bar the image tags commented out.
App.js
function App() {
return (
<div>
<Navbar />
<Hero />
<Card
img="katie-zaferes.png"
rating="5.0"
reviewCount="6"
country="USA"
title="Life Lessons With Katie Zaferes"
price={136}
/>
</div>
);
}
Card.js
import Star from "../images/star.png";
import Athlete from "../images/katie-zaferes.png";
const Card = (props) => {
return (
<div className="card">
<img src={Athlete} alt="card-image" />
{/* <img src="../images/katie-zaferes.png" alt="img" /> */}
{/* <img src={`../images/${props.img}`} alt="card-image" /> */}
<div className="card--stats">
<img src={Star} alt="star" className="card--star" />
<span>{props.rating}</span>
<span className="gray">{props.reviewCount} •</span>
<span className="gray">{props.country}</span>
</div>
<p>{props.title}</p>
<p>
<b>From $ {props.price} </b> / person
</p>
</div>
);
};
export default Card;
In the case of the image you are trying to show on your App.js, you are giving your Card component a wrong path to find your image, your app needs to know where to find your "katie-zaferes.png" image, so the right way should be:
<Card
img='../images/katie-zaferes.png'
...
/>(I'm assuming that your App.js and your Card.js files are on the same folder, in case they're not, you have to modify the path to match your /images/katie-zaferes.png)
Note: By the way, for your next questions here in StackOverflow, try to write your code directly on your post, using the Javascript/HTML/CSS button, never use images because it makes more work for people to answer your question/
I figured out it was an image path issue. I placed my 'images' folder in 'public'. I could then remove all imports and access them anywhere through '/images/example.png'.
Used in a component as shown below:
const Card = (props) => {
return (
<div className="card">
<img src={`/images/${props.img}`} alt="card" />
<div className="card--stats">
<img src="/images/star.png" alt="star" className="card--star" />
<span>{props.rating}</span>
<span className="gray">{props.reviewCount} • </span>
<span className="gray">{props.country}</span>
</div>
<p>{props.title}</p>
<p>
<b>From $ {props.price} </b> / person
</p>
</div>
);
};
export default Card;