0

I am learning react and following a series of challenges to do so. One such challenge has me create a React component that takes in properties. One of these properties is the name of a png file. I was not able to do this correctly but the correct line does not seem to be working.

This is an Ubuntu distro on WSL on a windows laptop.

I have done research on the topic the last few days and most response say to turn off adblocker (did not fix it), change file permissions (also did not work), turn off JS and CSS source maps (also did not work).

I noticed that a manually coded url to an image in the same folder was changed to

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgA…Cxd82/eqNyzDUJ0ohc8k/PbelTLtHJFgAAAAASUVORK5CYII=

My component is

import React from "react";
import star from "../images/star.png";

export default function Card(props) {
  return (
    <div className="card">
      <div className="card--image">
        <h3 className="card--availability">SOLD OUT</h3>
        <img src={`../images/${props.img}`} alt="not working"></img>
      </div>
      <div className="card--rating">
        <img src={star}></img>
        <p className="card--dark-text">{props.rating}</p>
        <p className="card--light-text">
          ({props.reviewCount}) &middot; {props.country}
        </p>
      </div>
      <p className="card--desc">{props.title}</p>
      <div className="card--price">
        <h5>From ${props.price}</h5>
      </div>
    </div>
  );
}

Which is used in

import React from "react";
import Navbar from "./components/navbar";
import Hero from "./components/hero";
import Card from "./components/card";

export default function App() {
  return (
    //<Hero />
    <div>
      <Navbar />
      <Card
        img="zeferes.png"
        rating="5.0"
        reviewCount={6}
        country="USA"
        title="Playing on the beach with me."
        price={136}
      />
    </div>
  );
}

My file directory looks like

enter image description here

And every other property works.

The displayed screen right now is:

enter image description here

What is going wrong? Thank you for any help.

Sam Oberly
  • 13
  • 2
  • Guess this link will help you: https://stackoverflow.com/questions/54033765/how-to-give-image-src-dynamically-in-react-js – Sujit Libi Nov 05 '22 at 04:11
  • Does this answer your question? [How to give Image src dynamically in react js?](https://stackoverflow.com/questions/54033765/how-to-give-image-src-dynamically-in-react-js) – DulacreMi Nov 05 '22 at 04:42
  • why don't you import it like the way you import star image? – Farbod Shabani Nov 05 '22 at 04:58

1 Answers1

0

import for the image file(zeferes.png) is missing in Card component. importing image file in Card component should fix the issue.

Vikas Gupta
  • 1
  • 1