Estoy tratando de mostrar imágenes para cada objeto dentro de categoryDictonary y luego mostrarlas usando la etiqueta html <img src=items.image /> . Sin embargo, no puedo obtener la imagen deseada.
¿Qué estoy haciendo mal?

Simplemente habría usado enlaces a imágenes, pero los enlaces son muy, muy largos y hacen que el código se vea/se sienta torpe también.
Creo que es una buena práctica tener una carpeta separada para las imágenes, pero no puedo implementar lo mismo.

 import { useState } from "react"; import "./styles.css"; export default function App() { var categoryDictonary = { Marvel: [ { name: "WandaVision", image: "Images/Wanda.jfif", rating: 10 }, { name: "Loki", image: "Loki.jfif", rating: 9.5 }, { name: "Moon Knight", image: "Images/MoonKnight.jfif", rating: 8 } ], SitComs: [ { name: "Brooklyn 99", image: "Images/Wanda", rating: 10 }, { name: "Bing Bang Theory", image: "Images/Loki", rating: 7 }, { name: "Friends", image: "Image/Wanda", rating: 7 } ] }; var categories = Object.keys(categoryDictonary); var [category, setCategory] = useState("Marvel"); function ClickHandler({ item }) { console.log(item); setCategory(item); console.log("Categoty is" + category); } return ( <div className="App"> <h2>TV Show Ratings</h2> <h3>Check out my ratings on some of the most popular TV Shows</h3> <ul> {categories.map((item) => { return ( <li id="Categories" key={item} onClick={() => ClickHandler({ item })} > {item} </li> ); })} </ul> //List to display all shows of a given category <ul id="ShowList"> {categoryDictonary[category].map((items) => { return ( <li id="Shows" key={items.name}> //Gives the name of the show <div>{items.name}</div> //Gives the image of the show <div> <img src={items.image} /> </div> //Gives the rating of the show <div>Rating:{items.rating}</div> </li> ); })} </ul> </div> ); }

Aquí está la salida correspondiente a mi código: