Estoy pasando el nombre de la imagen como accesorios en la instancia del componente Tarjeta en App.js. Luego lo recibo del componente Tarjeta y lo renderizo en el DOM. Pero mi imagen no se muestra en el DOM. ¿Cuál podría ser la razón?

Esta es mi aplicación.js

 import React from "react"; import "./style.css"; import Navbar from "./components/Navbar"; import Hero from "./components/Hero"; import Card from "./components/Card"; import "./images/image12.png"; import "./images/Star1.png"; function App() { return ( <div className="App"> <Navbar /> <Hero /> <Card img="image12.png" star="Star1.png" obtainedRating={5.0} TotalRating="6-USA" briefText="Life lessons with Katie Zaferes" price="$136" person="/person" /> </div> ); } export default App;

Aquí está el componente de mi tarjeta

 import React from "react"; import "../style.css"; import "../images/image12.png"; import "../images/Star1.png"; export default function Card(props) { console.log(props); return ( <div className="card--section"> <img src={`../images/${props.img}`} className="card--image" alt="Katie" /> <div className="rating"> <img src={`../images/${props.star}`} className="star--image" alt="star" /> <small> {props.obtainedRating} <span>{props.totalRating}</span> </small> </div> <p className="brief-text">{props.briefText}</p> <p className="price"> <strong>{props.price}</strong> {props.person} </p> </div> ); }

Esta es mi estructura de carpetas

src -componentes -Card.js -images -image12.png -Star1.png -App.js -index.js