'invalid url for nextjs image

I am writing the frontend of my application with nextjs

I am trying to load image from the public folder but I am getting invalid url

I copied the image to the public folder with the name close.png

I tried to access the image with the following code

 import Image from "next/image";

const Nav = () => {
  return (
    <div className="__nav">
      <Image src="/close.png" width={50} height={50} alt="logo" />
    </div>
  );
};

export default Nav;

I get invalid url.

Error Message

Error occurred prerendering page "/Components/NoAuthArea/Nav". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError [ERR_INVALID_URL]: Invalid URL: /close.png
    at onParseError (internal/url.js:279:9)
    at parse (<anonymous>)
    at new URL (internal/url.js:355:5)
    at imgixLoader (C:\Users\OSHABZ\Documents\My jobs\findahouse\.next\server\chunks\675.js:516:17)
    at defaultImageLoader (C:\Users\OSHABZ\Documents\My jobs\findahouse\.next\server\chunks\675.js:234:16)
    at C:\Users\OSHABZ\Documents\My jobs\findahouse\.next\server\chunks\675.js:203:39

Close Image

How do I solve this problem

Solution 1:^[1]

Try using nextjs image. https://nextjs.org/docs/api-reference/next/image

Example:

import Image from "next/image"

<Image src="/close.png" width={200} height={200} />

Solution 2:^[2]

I don't know if you resolved your error, but you should check out the documentation about recommended static imports.

import profilePic from '../public/me.png'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Gucal
Solution 2	Lauri Lehto

'invalid url for nextjs image

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]