Image throw 502 error on same domain Nextjs

My website is at example.com and I have an image at example.com/images/myimage.png (images folder is inside the /public folder.

I am trying to load that image on my website; For example

<Image   src={`${host}/images/myimage.png`}... />

with ${host} being http://localhost or https://example.com on production

My next.config.js:

        domains: ["localhost:3000","localhost","example.com"        ],

It works perfectly on localhost (images load fine) but fails on production via Vercel;

All I get is a 502 Error with OPTIMIZED_EXTERNAL_IMAGE_REQUEST_UNAUTHORIZED as error code.

Why is this happening and how can I prevent it?