props.img not displaying

Sephiroth_dude

Learning about props in react atm, I'm having an issue whereby when I try to pass an image as a prop its won't display properly, see the screenshot below

Untitled.png

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(
        <div className="div1">
            <img src={`../images/${props.img}`}   className="katie1"/>
            <div className="card-stats">
                <img src={star} className="card--star" />
                <span>{props.rating}</span>
                <span className="grey">({props.reviewcount}) </span>
                <span className="grey">{props.country}</span>
            </div>
            <p>{props.title}</p>
            <p>From ${props.price} / person</p>
        </div>
    )
}

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"

counterpointaud

This is likely more an issue with whatever bundler you are using, and how it's configured, rather than React. If you post a link to a GitHub repo or something, someone will likely be able to help you. Hard to know what the issue is otherwise.

Mr. CooL ICE

Have you tried doing the following in Card?

<img src={props.img}   className="katie1"/>

Looking at the way you've pasted it above, it looks like the image URL will resolve to be:

../images/./images/katie.png

Failing that, maybe change the prop to just be the filename as opposed to the relative filepath. Have you been able to check through the browser debugger/inspector to see what the image URL is resolving to be?