I am working on an app which has a product page and an image won't render on the website despite the rest of the information on inside the return statement rendered. I have no errors on web dev tools, the app compiled successfully with the following code.

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>

The Main page did render all the images though. Not sure how to find the issue especially when there is no error showing.

screen shot of terminal, web dev tools and the app