I'm working with Next.js for my coding project and I have a array of images that I need to incorporate into my application.
CODE1
<Image src={require("../assets/image1.png")} />
This code snippet works perfectly fine and displays the image without any issues.
However, when I attempt this approach instead: CODE2
const path= "../assets/image1.png"
<Image src={require(path)} />
Next.js throws an error stating that the module cannot be found. Error: Cannot find module '../assets/image1.png'
I also tried the following:
<Image src={require(`"${path}"`)} />
But unfortunately, I still encounter the same error message. Error: Cannot find module '"../assets/image1.png"'
Additionally, I attempted adding a backslash before the path like so: const path = "/../assets/image1.png"* However, this method also resulted in an error.
Please note that in all three scenarios, the image path remains consistent, but only code 1 functions correctly. Any assistance on resolving this issue would be greatly appreciated.