How to use relative path in Next Image?

I want to fetch corresponding product image on each dynamic route in my NextJS project, like this:

    export default function singleProductPage({ params }) {
    const { product_code } = params;
    const imagePath = `../../../../assets/products/Hammer/${product_code}.jpg`;

    return (
        <div>
            <Image src={imagePath} width={300} height={300} alt="xx" />
        </div>
    );
}

But it doesn’t work at all. I use require module instead:

const imagePath = require(`../../../../assets/products/Hammer/${product_code}.jpg`);

It works but got a warning “Only plain objects can be passed to Client Components from Server Components. Module objects are not supported.”

Is there a better way to do this?