16

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

enter image description here

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Bukenya KizzaRoland
  • 721
  • 1
  • 7
  • 13
  • 2
    Does this answer your question: [I can't reference an image in Next.js](https://stackoverflow.com/questions/59546370/i-cant-reference-an-image-in-next-js)? Just reference your image as `/logo.png`. – juliomalves Oct 03 '21 at 16:38
  • Try to use require in src. eg: src={require('../public/logo.png')} – Elisei Nicolae Jan 23 '22 at 13:40

2 Answers2

20

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
Y H R
  • 595
  • 5
  • 15
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

Bukenya KizzaRoland
  • 721
  • 1
  • 7
  • 13