Estoy trabajando en una aplicación que tiene una página de producto y una imagen no se mostrará en el sitio web a pesar del resto de la información en el interior de la declaración de devolución. No tengo errores en las herramientas de desarrollo web, la aplicación se compiló correctamente con el siguiente código.

ProductScreen.js

 import React from 'react'; import data from '../data'; import Rating from '../components/Rating'; import { Link, useParams } from 'react-router-dom'; function ProductScreen() { const { id } = useParams(); // const params = useParams(); // const { id: productId } = params; const product = data.products.find((x) => x._id === (id)); if (!product) { return <div> Product Not Found </div>; } return ( <div> <Link to="/">Back To Result</Link> <div className="row top"> <div className="col-2"> <img className="large" src={product.image} alt={product.name} ></img> </div>

Sin embargo, la página principal mostró todas las imágenes. No estoy seguro de cómo encontrar el problema, especialmente cuando no aparece ningún error.

captura de pantalla de la terminal, las herramientas de desarrollo web y la aplicación