Props.img not displaying-CodePudding

Here’s my code in App.js

import React from “react”; import Navbar from “./components/Navbar” import Hero from “./components/Hero” import Card from “./components/Card”

export default function App(){ return(

<div>
    <Navbar />
    <Hero />
    <Card
        img="./images/katie.png"
        rating={5.0}
        reviewcount={6}
        country="usa"
        title="Life lessons from Katie Zaferes"
        price={138}
    />

</div>

) }

and where I’m trying to pass the image into

import React from “react”

import star from “…/images/star.png”

export default function Card(props){

return( <img src={../images/${props.img}} className="katie1"/> {props.rating} ({props.reviewcount}) {props.country}

{props.title}

From ${props.price} / person

) } Any ideas? I’ve tried moving the images folder to the public folder but react doesn’t seem to like that as I get an error message “images can’t be outside of the src folder”

CodePudding user response：

you should import image and send imported image as props.

import imgSrc from "./images/katie.png";

send image as props:

<div>
    <Navbar />
    <Hero />
    <Card
        img={imgSrc}
        rating={5.0}
        reviewcount={6}
        country="usa"
        title="Life lessons from Katie Zaferes"
        price={138}
    />

</div>

CodePudding user response：

instead of writing it like this src={../images/${props.img}}, I would suggest you to leave only src={props.img} there and in the main App.js file, where you have App component, since you have already imported the image named star, write it like this

<Card
        img={star}
        ...
/>