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 ponents folder I have a ponent 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 mented out?

Might be something stupid but I can't see it. Thanks all. Just for clarity everything else works bar the image tags mented 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;

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 ponents folder I have a ponent 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 mented out?

Might be something stupid but I can't see it. Thanks all. Just for clarity everything else works bar the image tags mented 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;

• javascript
• reactjs
• image
• import

3 Answers 3

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 ponent 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;

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 'ponent' folder

In the case of the image you are trying to show on your App.js, you are giving your Card ponent 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/