I am currently working on a vite+react and tailwind project where I am using react router for dynamic routing and overall routing and navigation in the application.

import { useParams } from "react-router-dom";
import productsData from "../data.json";
import AddToCart from "../components/AddToCart";
import Items from "../components/Items"

const ProductPage = () => {
    const { productSlug } = useParams();
    const product = productsData.find((p) => p.slug === productSlug);
    console.log(product)
    console.log("Image path:", product.categoryImage.mobile)

    if (!product) {
        return <div>Product not found</div>;
    }

    return (
        <div>
            <h1 className="text-[15px] font-medium leading-[25px] ml-[25px] mt-[25px]">
                Go Back
            </h1>
            <div className="mt-[30px] w-[327px] h-auto mx-auto flex flex-col gap-7">
                <img
                    src={product.categoryImage.mobile}
                    alt={product.name}
                    className="w-[327px] h-[327px] border border-black mx-auto"
                />
                <p className="text-transform: uppercase text-main-orange tracking-[10px] text-[14px]">
                    new product
                </p>
                <h2 className="font-bold text-[28px] tracking-[1px]">
                    {product.name}
                </h2>
                <p className="text-[15px] leading-[25px] opacity-50">
                    {product.description}
                </p>
                <p className="font-bold ">${product.price}</p>
                <AddToCart />
            </div>
            <div className="w-[327px] h-[515px] flex flex-col mx-auto my-[70px] justify-between">
                <h2 className="font-bold text-2xl leading-[36px] tracking-[0.86px] text-transform: uppercase">
                    Features
                </h2>
                <p className="text-[15px] leading-[25px] opacity-50">
                    {product.features}
                </p>
            </div>
            <div className="w-[327px] h-[217px] mx-auto flex flex-col justify-between">
                <h2 className="text-transform: uppercase font-bold text-2xl leading-[36px] tracking-[0.86px]">
                    in the box
                </h2>
                <div className="w-[199px] h-[157px]">
                    {product.includes.map((item, index) => (
                        <p
                            key={index}
                            className="text-[15px] leading-[25px] font-medium "
                        >
                            {" "}
                            <span className="text-main-orange font-bold mr-5">
                                {item.quantity}x
                            </span>{" "}
                            <span className="opacity-50">{item.item}</span>
                        </p>
                    ))}
                </div>
            </div>
            <div className="w-[327px] h-[756px] mx-auto my-[70px] border border-black">

            </div>
            <div className="w-[327px] h-[983px] border border-black mb-24 mt-[140px] mx-auto"></div>
            <Items />
        </div>
    );
};

export default ProductPage;

as you can see above I have a product page where I intent to dynamically showcase the products of this store. I have a data.json and I have pchecked whether the paths are correct and corresponding however I cannot get the image to render in the img tag with the src={product.categoryImage.mobile

data.json

[
    {
        "id": 1,
        "slug": "yx1-earphones",
        "name": "YX1 Wireless Earphones",
        "image": {
            "mobile": "./assets/product-yx1-earphones/mobile/image-product.jpg",
            "tablet": "./assets/product-yx1-earphones/tablet/image-product.jpg",
            "desktop": "./assets/product-yx1-earphones/desktop/image-product.jpg"
        },
        "category": "earphones",
        "categoryImage": {
            "mobile": "./assets/product-yx1-earphones/mobile/image-category-page-preview.jpg",
            "tablet": "./assets/product-yx1-earphones/tablet/image-category-page-preview.jpg",
            "desktop": "./assets/product-yx1-earphones/desktop/image-category-page-preview.jpg"
        },
        "new": true,
        "price": 599,
        "description": "Tailor your listening experience with bespoke dynamic drivers from the new YX1 Wireless Earphones. Enjoy incredible high-fidelity sound even in noisy environments with its active noise cancellation feature.",
        "features": "Experience unrivalled stereo sound thanks to innovative acoustic technology. With improved ergonomics designed for full day wearing, these revolutionary earphones have been finely crafted to provide you with the perfect fit, delivering complete comfort all day long while enjoying exceptional noise isolation and truly immersive sound.nnThe YX1 Wireless Earphones features customizable controls for volume, music, calls, and voice assistants built into both earbuds. The new 7-hour battery life can be extended up to 28 hours with the charging case, giving you uninterrupted play time. Exquisite craftsmanship with a splash resistant design now available in an all new white and grey color scheme as well as the popular classic black.",
        "includes": [
            {
                "quantity": 2,
                "item": "Earphone unit"
            },
            {
                "quantity": 6,
                "item": "Multi-size earplugs"
            },
            {
                "quantity": 1,
                "item": "User manual"
            },
            {
                "quantity": 1,
                "item": "USB-C charging cable"
            },
            {
                "quantity": 1,
                "item": "Travel pouch"
            }
        ],
        "gallery": {
            "first": {
                "mobile": "./assets/product-yx1-earphones/mobile/image-gallery-1.jpg",
                "tablet": "./assets/product-yx1-earphones/tablet/image-gallery-1.jpg",
                "desktop": "./assets/product-yx1-earphones/desktop/image-gallery-1.jpg"
            },
            "second": {
                "mobile": "./assets/product-yx1-earphones/mobile/image-gallery-2.jpg",
                "tablet": "./assets/product-yx1-earphones/tablet/image-gallery-2.jpg",
                "desktop": "./assets/product-yx1-earphones/desktop/image-gallery-2.jpg"
            },
            "third": {
                "mobile": "./assets/product-yx1-earphones/mobile/image-gallery-3.jpg",
                "tablet": "./assets/product-yx1-earphones/tablet/image-gallery-3.jpg",
                "desktop": "./assets/product-yx1-earphones/desktop/image-gallery-3.jpg"
            }
        },
        "others": [
            {
                "slug": "xx99-mark-one-headphones",
                "name": "XX99 Mark I",
                "image": {
                    "mobile": "./assets/shared/mobile/image-xx99-mark-one-headphones.jpg",
                    "tablet": "./assets/shared/tablet/image-xx99-mark-one-headphones.jpg",
                    "desktop": "./assets/shared/desktop/image-xx99-mark-one-headphones.jpg"
                }
            },
            {
                "slug": "xx59-headphones",
                "name": "XX59",
                "image": {
                    "mobile": "./assets/shared/mobile/image-xx59-headphones.jpg",
                    "tablet": "./assets/shared/tablet/image-xx59-headphones.jpg",
                    "desktop": "./assets/shared/desktop/image-xx59-headphones.jpg"
                }
            },
            {
                "slug": "zx9-speaker",
                "name": "ZX9 Speaker",
                "image": {
                    "mobile": "./assets/shared/mobile/image-zx9-speaker.jpg",
                    "tablet": "./assets/shared/tablet/image-zx9-speaker.jpg",
                    "desktop": "./assets/shared/desktop/image-zx9-speaker.jpg"
                }
            }
        ]
    },
    {
        "id": 2,
        "slug": "xx59-headphones",
        "name": "XX59 Headphones",
        "image": {
            "mobile": "./assets/product-xx59-headphones/mobile/image-product.jpg",
            "tablet": "./assets/product-xx59-headphones/tablet/image-product.jpg",
            "desktop": "./assets/product-xx59-headphones/desktop/image-product.jpg"
        },
        "category": "headphones",
        "categoryImage": {
            "mobile": "./assets/product-xx59-headphones/mobile/image-category-page-preview.jpg",
            "tablet": "./assets/product-xx59-headphones/tablet/image-category-page-preview.jpg",
            "desktop": "./assets/product-xx59-headphones/desktop/image-category-page-preview.jpg"
        },
        "new": false,
        "price": 899,
        "description": "Enjoy your audio almost anywhere and customize it to your specific tastes with the XX59 headphones. The stylish yet durable versatile wireless headset is a brilliant companion at home or on the move.",
        "features": "These headphones have been created from durable, high-quality materials tough enough to take anywhere. Its compact folding design fuses comfort and minimalist style making it perfect for travel. Flawless transmission is assured by the latest wireless technology engineered for audio synchronization with videos.nnMore than a simple pair of headphones, this headset features a pair of built-in microphones for clear, hands-free calling when paired with a compatible smartphone. Controlling music and calls is also intuitive thanks to easy-access touch buttons on the earcups. Regardless of how you use the XX59 headphones, you can do so all day thanks to an impressive 30-hour battery life that can be rapidly recharged via USB-C.",
        "includes": [
            {
                "quantity": 1,
                "item": "Headphone unit"
            },
            {
                "quantity": 2,
                "item": "Replacement earcups"
            },
            {
                "quantity": 1,
                "item": "User manual"
            },
            {
                "quantity": 1,
                "item": "3.5mm 5m audio cable"
            }
        ],
        "gallery": {
            "first": {
                "mobile": "./assets/product-xx59-headphones/mobile/image-gallery-1.jpg",
                "tablet": "./assets/product-xx59-headphones/tablet/image-gallery-1.jpg",
                "desktop": "./assets/product-xx59-headphones/desktop/image-gallery-1.jpg"
            },
            "second": {
                "mobile": "./assets/product-xx59-headphones/mobile/image-gallery-2.jpg",
                "tablet": "./assets/product-xx59-headphones/tablet/image-gallery-2.jpg",
                "desktop": "./assets/product-xx59-headphones/desktop/image-gallery-2.jpg"
            },
            "third": {
                "mobile": "./assets/product-xx59-headphones/mobile/image-gallery-3.jpg",
                "tablet": "./assets/product-xx59-headphones/tablet/image-gallery-3.jpg",
                "desktop": "./assets/product-xx59-headphones/desktop/image-gallery-3.jpg"
            }
        },
        "others": [
            {
                "slug": "xx99-mark-two-headphones",
                "name": "XX99 Mark II",
                "image": {
                    "mobile": "./assets/shared/mobile/image-xx99-mark-two-headphones.jpg",
                    "tablet": "./assets/shared/tablet/image-xx99-mark-two-headphones.jpg",
                    "desktop": "./assets/shared/desktop/image-xx99-mark-two-headphones.jpg"
                }
            },
            {
                "slug": "xx99-mark-one-headphones",
                "name": "XX99 Mark I",
                "image": {
                    "mobile": "./assets/shared/mobile/image-xx99-mark-one-headphones.jpg",
                    "tablet": "./assets/shared/tablet/image-xx99-mark-one-headphones.jpg",
                    "desktop": "./assets/shared/desktop/image-xx99-mark-one-headphones.jpg"
                }
            },
            {
                "slug": "zx9-speaker",
                "name": "ZX9 Speaker",
                "image": {
                    "mobile": "./assets/shared/mobile/image-zx9-speaker.jpg",
                    "tablet": "./assets/shared/tablet/image-zx9-speaker.jpg",
                    "desktop": "./assets/shared/desktop/image-zx9-speaker.jpg"
                }
            }
        ]
    },
    {
        "id": 4,
        "slug": "xx99-mark-two-headphones",
        "name": "XX99 Mark II Headphones",
        "image": {
            "mobile": "./assets/product-xx99-mark-two-headphones/mobile/image-product.jpg",
            "tablet": "./assets/product-xx99-mark-two-headphones/tablet/image-product.jpg",
            "desktop": "./assets/product-xx99-mark-two-headphones/desktop/image-product.jpg"
        },
        "category": "headphones",
        "categoryImage": {
            "mobile": "./assets/product-xx99-mark-two-headphones/mobile/image-category-page-preview.jpg",
            "tablet": "./assets/product-xx99-mark-two-headphones/tablet/image-category-page-preview.jpg",
            "desktop": "./assets/product-xx99-mark-two-headphones/desktop/image-category-page-preview.jpg"
        },
        "new": true,
        "price": 2999,
        "description": "The new XX99 Mark II headphones is the pinnacle of pristine audio. It redefines your premium headphone experience by reproducing the balanced depth and precision of studio-quality sound.",
        "features": "Featuring a genuine leather head strap and premium earcups, these headphones deliver superior comfort for those who like to enjoy endless listening. It includes intuitive controls designed for any situation. Whether you’re taking a business call or just in your own personal space, the auto on/off and pause features ensure that you’ll never miss a beat.nnThe advanced Active Noise Cancellation with built-in equalizer allow you to experience your audio world on your terms. It lets you enjoy your audio in peace, but quickly interact with your surroundings when you need to. Combined with Bluetooth 5. 0 compliant connectivity and 17 hour battery life, the XX99 Mark II headphones gives you superior sound, cutting-edge technology, and a modern design aesthetic.",
        "includes": [
            {
                "quantity": 1,
                "item": "Headphone unit"
            },
            {
                "quantity": 2,
                "item": "Replacement earcups"
            },
            {
                "quantity": 1,
                "item": "User manual"
            },
            {
                "quantity": 1,
                "item": "3.5mm 5m audio cable"
            },
            {
                "quantity": 1,
                "item": "Travel bag"
            }
        ],
        "gallery": {
            "first": {
                "mobile": "./assets/product-xx99-mark-two-headphones/mobile/image-gallery-1.jpg",
                "tablet": "./assets/product-xx99-mark-two-headphones/tablet/image-gallery-1.jpg",
                "desktop": "./assets/product-xx99-mark-two-headphones/desktop/image-gallery-1.jpg"
            },
            "second": {
                "mobile": "./assets/product-xx99-mark-two-headphones/mobile/image-gallery-2.jpg",
                "tablet": "./assets/product-xx99-mark-two-headphones/tablet/image-gallery-2.jpg",
                "desktop": "./assets/product-xx99-mark-two-headphones/desktop/image-gallery-2.jpg"
            },
            "third": {
                "mobile": "./assets/product-xx99-mark-two-headphones/mobile/image-gallery-3.jpg",
                "tablet": "./assets/product-xx99-mark-two-headphones/tablet/image-gallery-3.jpg",
                "desktop": "./assets/product-xx99-mark-two-headphones/desktop/image-gallery-3.jpg"
            }
        },
        "others": [
            {
                "slug": "xx99-mark-one-headphones",
                "name": "XX99 Mark I",
                "image": {
                    "mobile": "./assets/shared/mobile/image-xx99-mark-one-headphones.jpg",
                    "tablet": "./assets/shared/tablet/image-xx99-mark-one-headphones.jpg",
                    "desktop": "./assets/shared/desktop/image-xx99-mark-one-headphones.jpg"
                }
            },
            {
                "slug": "xx59-headphones",
                "name": "XX59",
                "image": {
                    "mobile": "./assets/shared/mobile/image-xx59-headphones.jpg",
                    "tablet": "./assets/shared/tablet/image-xx59-headphones.jpg",
                    "desktop": "./assets/shared/desktop/image-xx59-headphones.jpg"
                }
            },
            {
                "slug": "zx9-speaker",
                "name": "ZX9 Speaker",
                "image": {
                    "mobile": "./assets/shared/mobile/image-zx9-speaker.jpg",
                    "tablet": "./assets/shared/tablet/image-zx9-speaker.jpg",
                    "desktop": "./assets/shared/desktop/image-zx9-speaker.jpg"
                }
            }
        ]
    }
    {
        "id": 6,
        "slug": "zx9-speaker",
        "name": "ZX9 Speaker",
        "image": {
            "mobile": "./assets/product-zx9-speaker/mobile/image-product.jpg",
            "tablet": "./assets/product-zx9-speaker/tablet/image-product.jpg",
            "desktop": "./assets/product-zx9-speaker/desktop/image-product.jpg"
        },
        "category": "speakers",
        "categoryImage": {
            "mobile": "./assets/product-zx9-speaker/mobile/image-category-page-preview.jpg",
            "tablet": "./assets/product-zx9-speaker/tablet/image-category-page-preview.jpg",
            "desktop": "./assets/product-zx9-speaker/desktop/image-category-page-preview.jpg"
        },
        "new": true,
        "price": 4500,
        "description": "Upgrade your sound system with the all new ZX9 active speaker. It’s a bookshelf speaker system that offers truly wireless connectivity -- creating new possibilities for more pleasing and practical audio setups.",
        "features": "Connect via Bluetooth or nearly any wired source. This speaker features optical, digital coaxial, USB Type-B, stereo RCA, and stereo XLR inputs, allowing you to have up to five wired source devices connected for easy switching. Improved bluetooth technology offers near lossless audio quality at up to 328ft (100m).nnDiscover clear, more natural sounding highs than the competition with ZX9’s signature planar diaphragm tweeter. Equally important is its powerful room-shaking bass courtesy of a 6.5” aluminum alloy bass unit. You’ll be able to enjoy equal sound quality whether in a large room or small den. Furthermore, you will experience new sensations from old songs since it can respond to even the subtle waveforms.",
        "includes": [
            {
                "quantity": 2,
                "item": "Speaker unit"
            },
            {
                "quantity": 2,
                "item": "Speaker cloth panel"
            },
            {
                "quantity": 1,
                "item": "User manual"
            },
            {
                "quantity": 1,
                "item": "3.5mm 10m audio cable"
            },
            {
                "quantity": 1,
                "item": "10m optical cable"
            }
        ],
        "gallery": {
            "first": {
                "mobile": "./assets/product-zx9-speaker/mobile/image-gallery-1.jpg",
                "tablet": "./assets/product-zx9-speaker/tablet/image-gallery-1.jpg",
                "desktop": "./assets/product-zx9-speaker/desktop/image-gallery-1.jpg"
            },
            "second": {
                "mobile": "./assets/product-zx9-speaker/mobile/image-gallery-2.jpg",
                "tablet": "./assets/product-zx9-speaker/tablet/image-gallery-2.jpg",
                "desktop": "./assets/product-zx9-speaker/desktop/image-gallery-2.jpg"
            },
            "third": {
                "mobile": "./assets/product-zx9-speaker/mobile/image-gallery-3.jpg",
                "tablet": "./assets/product-zx9-speaker/tablet/image-gallery-3.jpg",
                "desktop": "./assets/product-zx9-speaker/desktop/image-gallery-3.jpg"
            }
        },
        "others": [
            {
                "slug": "zx7-speaker",
                "name": "ZX7 Speaker",
                "image": {
                    "mobile": "./assets/shared/mobile/image-zx7-speaker.jpg",
                    "tablet": "./assets/shared/tablet/image-zx7-speaker.jpg",
                    "desktop": "./assets/shared/desktop/image-zx7-speaker.jpg"
                }
            },
            {
                "slug": "xx99-mark-one-headphones",
                "name": "XX99 Mark I",
                "image": {
                    "mobile": "./assets/shared/mobile/image-xx99-mark-one-headphones.jpg",
                    "tablet": "./assets/shared/tablet/image-xx99-mark-one-headphones.jpg",
                    "desktop": "./assets/shared/desktop/image-xx99-mark-one-headphones.jpg"
                }
            },
            {
                "slug": "xx59-headphones",
                "name": "XX59",
                "image": {
                    "mobile": "./assets/shared/mobile/image-xx59-headphones.jpg",
                    "tablet": "./assets/shared/tablet/image-xx59-headphones.jpg",
                    "desktop": "./assets/shared/desktop/image-xx59-headphones.jpg"
                }
            }
        ]
    }
]

this is my file structure

c:/Users/chris/Ecom-site/audiophileSite/src/
  ├─ assets/
  │  ├─ cart/
  │  │  ├─ image-xx59-headphones.jpg
  │  │  ├─ image-xx99-mark-one-headphones.jpg
  │  │  ├─ image-xx99-mark-two-headphones.jpg
  │  │  ├─ image-yx1-earphones.jpg
  │  │  ├─ image-zx7-speaker.jpg
  │  │  └─ image-zx9-speaker.jpg
  │  ├─ checkout/
  │  │  ├─ icon-cash-on-delivery.svg
  │  │  └─ icon-order-confirmation.svg
  │  ├─ home/
  │  │  ├─ desktop/
  │  │  │  ├─ image-earphones-yx1.jpg
  │  │  │  ├─ image-hero.jpg
  │  │  │  ├─ image-speaker-zx7.jpg
  │  │  │  ├─ image-speaker-zx9.png
  │  │  │  └─ pattern-circles.svg
  │  │  ├─ mobile/
  │  │  │  ├─ image-earphones-yx1.jpg
  │  │  │  ├─ image-header.jpg
  │  │  │  ├─ image-speaker-zx7.jpg
  │  │  │  └─ image-speaker-zx9.png
  │  │  └─ tablet/
  │  │     ├─ image-earphones-yx1.jpg
  │  │     ├─ image-header.jpg
  │  │     ├─ image-speaker-zx7.jpg
  │  │     └─ image-speaker-zx9.png
  │  ├─ product-xx59-headphones/
  │  │  ├─ desktop/
  │  │  │  ├─ image-category-page-preview.jpg
  │  │  │  ├─ image-gallery-1.jpg
  │  │  │  ├─ image-gallery-2.jpg
  │  │  │  ├─ image-gallery-3.jpg
  │  │  │  └─ image-product.jpg
  │  │  ├─ mobile/
  │  │  │  ├─ image-category-page-preview.jpg
  │  │  │  ├─ image-gallery-1.jpg
  │  │  │  ├─ image-gallery-2.jpg
  │  │  │  ├─ image-gallery-3.jpg
  │  │  │  └─ image-product.jpg
  │  │  └─ tablet/
  │  │     ├─ image-category-page-preview.jpg
  │  │     ├─ image-gallery-1.jpg
  │  │     ├─ image-gallery-2.jpg
  │  │     ├─ image-gallery-3.jpg
  │  │     └─ image-product.jpg
  │  ├─ product-xx99-mark-one-headphones/
  │  │  ├─ desktop/
  │  │  │  ├─ image-category-page-preview.jpg
  │  │  │  ├─ image-gallery-1.jpg
  │  │  │  ├─ image-gallery-2.jpg
  │  │  │  ├─ image-gallery-3.jpg
  │  │  │  └─ image-product.jpg
  │  │  ├─ mobile/
  │  │  │  ├─ image-category-page-preview.jpg
  │  │  │  ├─ image-gallery-1.jpg
  │  │  │  ├─ image-gallery-2.jpg
  │  │  │  ├─ image-gallery-3.jpg
  │  │  │  └─ image-product.jpg
  │  │  └─ tablet/
  │  │     ├─ image-category-page-preview.jpg
  │  │     ├─ image-gallery-1.jpg
  │  │     ├─ image-gallery-2.jpg
  │  │     ├─ image-gallery-3.jpg
  │  │     └─ image-product.jpg
  │  ├─ product-xx99-mark-two-headphones/
  │  │  ├─ desktop/
  │  │  │  ├─ image-category-page-preview.jpg
  │  │  │  ├─ image-gallery-1.jpg
  │  │  │  ├─ image-gallery-2.jpg
  │  │  │  ├─ image-gallery-3.jpg
  │  │  │  └─ image-product.jpg
  │  │  ├─ mobile/
  │  │  │  ├─ image-category-page-preview.jpg
  │  │  │  ├─ image-gallery-1.jpg
  │  │  │  ├─ image-gallery-2.jpg
  │  │  │  ├─ image-gallery-3.jpg
  │  │  │  └─ image-product.jpg
  │  │  └─ tablet/
  │  │     ├─ image-category-page-preview.jpg
  │  │     ├─ image-gallery-1.jpg
  │  │     ├─ image-gallery-2.jpg
  │  │     ├─ image-gallery-3.jpg
  │  │     └─ image-product.jpg
  │  ├─ product-yx1-earphones/
  │  │  ├─ desktop/
  │  │  │  ├─ image-category-page-preview.jpg
  │  │  │  ├─ image-gallery-1.jpg
  │  │  │  ├─ image-gallery-2.jpg
  │  │  │  ├─ image-gallery-3.jpg
  │  │  │  └─ image-product.jpg
  │  │  ├─ mobile/
  │  │  │  ├─ image-category-page-preview.jpg
  │  │  │  ├─ image-gallery-1.jpg
  │  │  │  ├─ image-gallery-2.jpg
  │  │  │  ├─ image-gallery-3.jpg
  │  │  │  └─ image-product.jpg
  │  │  └─ tablet/
  │  │     ├─ image-category-page-preview.jpg
  │  │     ├─ image-gallery-1.jpg
  │  │     ├─ image-gallery-2.jpg
  │  │     ├─ image-gallery-3.jpg
  │  │     └─ image-product.jpg
  │  ├─ product-zx7-speaker/
  │  │  ├─ desktop/
  │  │  │  ├─ image-category-page-preview.jpg
  │  │  │  ├─ image-gallery-1.jpg
  │  │  │  ├─ image-gallery-2.jpg
  │  │  │  ├─ image-gallery-3.jpg
  │  │  │  └─ image-product.jpg
  │  │  ├─ mobile/
  │  │  │  ├─ image-category-page-preview.jpg
  │  │  │  ├─ image-gallery-1.jpg
  │  │  │  ├─ image-gallery-2.jpg
  │  │  │  ├─ image-gallery-3.jpg
  │  │  │  └─ image-product.jpg
  │  │  └─ tablet/
  │  │     ├─ image-category-page-preview.jpg
  │  │     ├─ image-gallery-1.jpg
  │  │     ├─ image-gallery-2.jpg
  │  │     ├─ image-gallery-3.jpg
  │  │     └─ image-product.jpg
  │  ├─ product-zx9-speaker/
  │  │  ├─ desktop/
  │  │  │  ├─ image-category-page-preview.jpg
  │  │  │  ├─ image-gallery-1.jpg
  │  │  │  ├─ image-gallery-2.jpg
  │  │  │  ├─ image-gallery-3.jpg
  │  │  │  └─ image-product.jpg
  │  │  ├─ mobile/
  │  │  │  ├─ image-category-page-preview.jpg
  │  │  │  ├─ image-gallery-1.jpg
  │  │  │  ├─ image-gallery-2.jpg
  │  │  │  ├─ image-gallery-3.jpg
  │  │  │  └─ image-product.jpg
  │  │  └─ tablet/
  │  │     ├─ image-category-page-preview.jpg
  │  │     ├─ image-gallery-1.jpg
  │  │     ├─ image-gallery-2.jpg
  │  │     ├─ image-gallery-3.jpg
  │  │     └─ image-product.jpg
  │  ├─ shared/
  │  │  ├─ desktop/
  │  │  │  ├─ icon-arrow-right.svg
  │  │  │  ├─ icon-cart.svg
  │  │  │  ├─ icon-facebook.svg
  │  │  │  ├─ icon-instagram.svg
  │  │  │  ├─ icon-twitter.svg
  │  │  │  ├─ image-best-gear.jpg
  │  │  │  ├─ image-category-thumbnail-earphones.png
  │  │  │  ├─ image-category-thumbnail-headphones.png
  │  │  │  ├─ image-category-thumbnail-speakers.png
  │  │  │  ├─ image-xx59-headphones.jpg
  │  │  │  ├─ image-xx99-mark-one-headphones.jpg
  │  │  │  ├─ image-xx99-mark-two-headphones.jpg
  │  │  │  ├─ image-zx7-speaker.jpg
  │  │  │  ├─ image-zx9-speaker.jpg
  │  │  │  └─ logo.svg
  │  │  ├─ mobile/
  │  │  │  ├─ image-best-gear.jpg
  │  │  │  ├─ image-xx59-headphones.jpg
  │  │  │  ├─ image-xx99-mark-one-headphones.jpg
  │  │  │  ├─ image-xx99-mark-two-headphones.jpg
  │  │  │  ├─ image-zx7-speaker.jpg
  │  │  │  └─ image-zx9-speaker.jpg
  │  │  └─ tablet/
  │  │     ├─ icon-hamburger.svg
  │  │     ├─ image-best-gear.jpg
  │  │     ├─ image-xx59-headphones.jpg
  │  │     ├─ image-xx99-mark-one-headphones.jpg
  │  │     ├─ image-xx99-mark-two-headphones.jpg
  │  │     ├─ image-zx7-speaker.jpg
  │  │     └─ image-zx9-speaker.jpg
  │  └─ favicon-32x32.png
  ├─ components/
  │  ├─ Footer.jsx
  │  ├─ Items.jsx
  │  ├─ Layout.jsx
  │  ├─ Navbar.jsx
  │  └─ ScrollToTop.jsx
  ├─ pages/
  │  ├─ Earphones.jsx
  │  ├─ Headphones.jsx
  │  ├─ HomePage.jsx
  │  ├─ ProductPage.jsx
  │  └─ Speakers.jsx
  ├─ App.jsx
  ├─ data.json
  ├─ index.css
  └─ main.jsx

import "./index.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";
import Headphones from "./pages/Headphones";
import Speakers from "./pages/Speakers";
import Earphones from "./pages/Earphones";
import Layout from "./components/Layout";
import ProductPage from "./pages/ProductPage";

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Layout />}>
                    <Route index element={<HomePage />} />
                    <Route
                        path="headphones"
                        element={<Headphones />}
                    />
                    <Route
                        path="speakers"
                        element={<Speakers />}
                    />
                    <Route
                        path="earphones"
                        element={<Earphones />}
                    />
                    <Route
                        path="product/:productSlug"
                        element={<ProductPage />}
                    />
                </Route>
            </Routes>
        </Router>
    );
}

export default App;

I do not want to write multiple pages therefore I need assistance in how to solve this issue and render the image

tbh the only other thing I’ve thought of trying made no sense so I have tried using require to get the images to render.