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

Question

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?

Mohsen Mahoski · Accepted Answer · 2022-01-19 20:13:01Z

1

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

edited Jan 19, 2022 at 20:13

answered Jan 19, 2022 at 20:05

Mohsen Mahoski

4921 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Otis Over a year ago

Thanks alot, you just made my day. smiles :)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related