I have an image located in the public/img directory. I want to render it using the next.js built-in <Image/> tag.

here is the code I have written:

     <Image
                onClick={hideModal}
                alt="close_button"
                src="/img/close_button.png"
                width="20px"
                height="20px"
              />

but nothing is shown on the page (not even the alt-text).

the thing is when I use the <img/> tag, it works as expected but with the <Image/>, it doesn't