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

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://localhost:5000/public/xIx0o7qgT-diet-nutrition.png&w=256&q=100'

Please what is wrong?

CodePudding user response：

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