I'm trying to import an image in Next.js but I get this error. I don't know what's the problem, could someone here help me about this? The image is located in public folder, this is the Error I get when I run the server.
Error: Failed to parse src "../public/logo.png" on
next/image, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)
Whatever is found in Next.js' public folder can be accessed directly with an /. It can also be accessed by your end-users if /logo.png is typed on their search bar.
https://nextjs.org/docs/basic-features/static-file-serving
Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/). For example, if you add an image to public/me.png, the following code will access the image:
This ought to do it:
<Image src="/logo.png" alt="logo" width="64" height="64" />
Assuming your project's structure is the following:
root
|
├───public
│ └───logo.png
oh to solve that error you just need to include a / at the beginning of ../public/logo.png to get this /../public/logo.png
/logo.png.