Check out the documentation:
Should be one of the following:
- An image file imported statically
- A path string. This can be an absolute external URL, or an internal path depending on the loader prop.
- When using an external URL, make sure to add it to remotePatterns in next.config.js
Also read more about local and remote images [here](https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images).
In short:
import logo from './logo.png';
<Image src={logo} />
The logo.png file is stored next to the component where it's imported. During the build process, Next.js will move it to the dist folder, determine the width and height attributes of the image, and set them to the component. This helps prevent layout shifting during image loading.
When providing a static path to the image:
<Image src={'/logo.png'} />
You're essentially telling Next that this is a remote image, and it should be loaded from either the next public folder or the remote location. (If using /logo.png, the image should be located at: public/logo.png). In this case, you'll need to manually set the image's width and height properties, or configure remote patterns for image optimization in Next.