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?
Error Cause Explanation
The next/image component in Next.js does not handle relative paths or dynamic paths well. It expects static paths or absolute URLs for the src attribute. This is because the image optimization engine requires the path to be resolvable and predictable at build time. Dynamic paths or relative paths can lead to issues where the component cannot correctly resolve or optimize the image, resulting in broken or missing images.
Suggested Solution:
Use Static Paths: Place images in the public directory and use absolute paths from there. For example:
const imagePath = /assets/products/Hammer/${product_code}.jpg;