Props.img not displaying

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”