1

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;
Improve this question

3 Answers 3

Reset to default
4

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;
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

If you cant put the 'images' folder in 'public' because create-react-app doesn't let you, put your path as a string literal inside a required function, it worked for me

const Card = (props) => { return ( <div className="card"> <img src={require(`../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;

This path works assuming you have your 'image' folder as a sibling to you 'component' folder

Improve this answer

Comments

0

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/

Improve this answer

6 Comments

Apologies. Fixed that, thanks. Added extra info if you can help.
Ok, i think i just understood your app 🤦‍♂️. You are defining your image name on the App.js and then passing the image file name through props to your Card Component. Are you not getting the image displaying with <img src={../images/${props.img}} alt="card-image" />?
Sorry for the confusion! Nope, that's not showing it at all and neither is the <img src="../images/katie-zaferes.png" alt="img" /> which I thought would have worked. Only the 'Athlete' import being used as src is working for some reason.
It's not your fault, i just need some sleep hahaha. Of course you want to reuse your Card component as many times you need, so i can recommend you to do the imports on your App.js like import Athlete from "../images/katie-zaferes.png" and then pass img={Athlete} as a prop into <Card />
Thanks for your help, I figured out it was a path issue more than anything else. (as shown in answer) Your method helped short term but not ideal having to import everything separately.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.