next.js: `next/image` external domains no longer working

What version of Next.js are you using?

10.1.2

What version of Node.js are you using?

15.8.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next dev

Describe the Bug

Since version 10.1.x the external image domains are no longer working under next.config.js. Take the following basic example.

module.exports = {
  images: {
    domains: ['cdn.sanity.io', 'pbs.twimg.com'],
  },
};

Error:

Error: Invalid src prop (https://cdn.sanity.io/images/foo/production/53ce1c173eb7cc38b81104e85336d5bf3bc3c864-1004x733.png?w=2000&h=2000&fit=max) on `next/image`, hostname "cdn.sanity.io" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Expected Behavior

Next.js next/image is able to render and optimise external images defined under the images section in next.config.js

To Reproduce

Run the most basic example that you can and try to render an image from an external domain like twitter using next/image.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 19
Comments: 24 (8 by maintainers)

Most upvoted comments

This issue does prevent us from upgrading to next 10.2.0 (or 10.1.3), can we bump the priority for this bug? Thanks!

chenrui333 on May 3, 2021

Image optimization for external domains definitely seems to be broken in non-production environments (local and test) since 10.1.x and including 10.2.0.

dstapleton92 on May 10, 2021

@felipefcm The requested resource isn't a valid image., this is related to the url you’re linking to not returning the correct MIME type, so your issue is related to #23523.

@jflayhart the initial issue does not mention Jest anywhere, your issue sounds like #21549.

timneutkens on May 12, 2021

@timneutkens this also works, but I would advise people away from using this since it involves a silly, one-off hack in prod-level code for test environment to pass.

<Image
        src={marketing_hero}
        width={1080}
        height={550}
        unoptimized={process.env.NODE_ENV === 'test'}.  // <------ THIS 
      />

jflayhart on May 11, 2021

@timneutkens Ah ok, @dstapleton92 and I aren’t having issues with app start, where our command is: ts-node --project tsconfig.server.json server/index.ts. yarn start (local run) works and prod builds work. It’s ONLY when we’re running tests where NODE_ENV = test is implicit to jest runner.

The error after yarn jest:

Error: Invalid src prop (https://1234.cloudfront.net/assets/marketing-hero.jpg) on `next/image`, hostname "1234.cloudfront.net" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Despite this being in our next.config.js:

// next.config.js
module.exports = {
  images: {
    domains: ['1234.cloudfront.net'],
  },
}

To get it to pass, this works: NODE_ENV=production jest but we can’t realistically do that for our test env.

jflayhart on May 13, 2021

Looks like similar issue has been described in https://github.com/vercel/next.js/issues/23523#issuecomment-813393374

Passing unoptimized={true} allows images to render

gdowmont on Apr 5, 2021