How can I display an external image file using an image component?

I am having a react and next js project running. If i use a basic image tag like the example below,

const IMG_API = 'http://localhost:5000/public/xIx0o7qgT-diet-nutrition.png';

          <img
            src={IMG_API}
            alt={name || t('text-card-thumbnail')}
            width={178}
            height={178}
            className="object-cover rounded-full"
          />

it’s fetches the image file from my node js server successfully. When i copy the image address from my browser, it points to the correct address ‘http://localhost:5000/public/xIx0o7qgT-diet-nutrition.png’

But when am using an Image component like the example below,

           <Image
            src={IMG_API}
            alt={name || t('text-card-thumbnail')}
            width={178}
            height={178}
            className="object-cover rounded-full"
          />

it does not fetch the image file rather it shows the alt. When i copy the image address from my browser, this is how the address looks like ‘http://localhost:3000/_next/image?url=http%3A%2F%2Flocalhost%3A5000%2Fpublic%2FxIx0o7qgT-diet-nutrition.png&w=256&q=100’

Please what is wrong?

>Solution :

add a custom loader to your Image:

<Image
            loader={() => imageUrl}
            src={IMG_API}
            alt={name || t('text-card-thumbnail')}
            width={178}
            height={178}
            className="object-cover rounded-full"
 />

and for cache the image and better performance add your server domain in your next.config.js:

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['localhost:5000'],
  },
}

and then you can remove loader from Image