Failed to parse src error when importing an image in Next.js [duplicate]

Question

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://)

Lennox

Does this answer your question: I can't reference an image in Next.js? Just reference your image as /logo.png. – Gorski

Try to use require in src. eg: src={require('../public/logo.png')} – Sponson

Answer 1

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 

Temperate

Answer 2

oh to solve that error you just need to include a / at the beginning of ../public/logo.png to get this /../public/logo.png

Lennox