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?