CODEWITHSUNDEEP
next.jsnextjs-image
Michael Lynch
Michael Lynch

Reputation: 3159

How do I use an image from an external domain in Next.js?

I'm trying to use the <Image> component in a Next.js project that references an external domain. I'm just working locally.

I'm instructed to add images.domains to my next.config.js file but that doesn't seem to work.

https://nextjs.org/docs/messages/next-image-unconfigured-host

next.config.js

module.exports = {
  images: {
    domains: ['placehold.it'],
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

My image:

<Image
  width={400}
  height={300}
  src="http://placehold.it/400x300"
/>

Am I missing something?

Upvotes: 0

Views: 2339

Answers (2)

David Richards
David Richards

Reputation: 81

From a quick view of the code, a domain seems to be correctly specified, but the image source simply has the domain + image size.

Does the stored image actually have a file name that needs to be included? Obviously, if the images are stored just tagged by size, it's possible that a missing file type (e.g. jpg) is required.

If an image placeholder is appearing on the page, right click to inspect the element or right click to copy the image address and paste it somewhere to inspect the entire path and check to see if it makes sense.

A loader is required if using a service such as Cloudinary. Use of a loader complicates (prevents?) using local images but I don't know how it might impact simply getting remote images.

Upvotes: 0

mooxl
mooxl

Reputation: 141

You have to set a loader function.

Upvotes: 1

Related Questions