next/image external domains no longer working

[segersniels]

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.

[felipefcm]

Reproducible in Linux.

[gdowmont]

Looks like similar issue has been described in #23523 (comment)

Passing unoptimized={true} allows images to render

[Tobi-mmt]

I have the same issue with next 10.1.3, node 14.15.4

Edit: Problem disapears for me with version 10.2.0

[chenrui333]

I have the same issue on both 10.1.3 and 10.2.0

node 14.16.1

[rheng001]

Facing same issue

[segersniels]

It does seem to work in a production environment (eg. deployed to Vercel) but not in a local environment.

[chenrui333]

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!

[intensr]

any update on this?

[rheng001]

Still having to pass unoptimized={true} for local environment :(

[dstapleton92]

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.

[timneutkens]

I can't reproduce this based on the steps provided, can you provide a complete reproduction? Potentially you tried to add the config to next.config.js but then forgot to reboot the dev server 🤔

This is what I tried:

pages/index.js:

import Image from "next/image";

export default function Home() {
  return (
    <>
      <h1>Hello World</h1>
      <Image
        src="https://pbs.twimg.com/media/E00DyJhXoAYlBYL?format=jpg&name=4096x4096"
        width={2000}
        height={2000}
      />
    </>
  );
}

next.config.js (same as in the report):

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

next start result:

next dev result:

Deployed on Vercel (https://my-app-testing-c1actrobz-timvercel.vercel.app/) result:

Note that the skewed image is because I put in 2000 width and height which is not the dimension of the actual image being loaded.

[jflayhart]

@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]

@dstapleton92 @timneutkens what's strange is if I do NODE_ENV=test yarn start it's fine and NODE_ENV=production jest... so is Jest+NextJS not configured properly to pull in the next.config.js file when NODE_ENV !== production? Let me try something...

I tried this to no avail... please advise:

// jest setupTests.js file
import { setConfig } from 'next/config'
setConfig({
  images: {
    domains: ['1234.cloudfront.net']
  }
})

[jflayhart]

found a workaround for Jest specs 😂

beforeEach(() => {
  process.env.NODE_ENV = 'production'
})

afterEach(() => {
  process.env.NODE_ENV = 'test'
})

[jflayhart]

@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 
      />

[dstapleton92]

Okay so I swear this was NOT working for me yesterday with local dev. I made sure to kill the dev server and restart and I was still receiving the error that the hostname was not in the domain config. Maybe the old config was being cached somewhere? After a fresh start today, it is working fine for me in local dev.

[intensr]

noob idea: could it be something sanity / cdn specific, since an external source of error could've changed over night. and tim tested with pbs.twimg.com rather than sanity.

[felipefcm]

Next.js 10.2.0
Node 14.16.0

pages/index.js

import Image from 'next/image';

export default function Home() {
	return (
		<Image 
			src="https://storage.googleapis.com/unitycloud-build-user-svc-live-extras-pub/17867078423645/9e85a63f-3908-4e07-a8e2-861b5bb89a8b/linux-rc-80/icon.png" 
			width={80} 
			height={80} 
		/>
	);
}

next.config.js

module.exports = {
	images: {
		domains: [
			'storage.googleapis.com',
		],
	}
}

Running yarn dev and accessing the page:

If unoptimized={true} is used, the image loads correctly. Also happens in production environment (yarn start).

[timneutkens]

@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.

[votemike]

I am also having this problem. Again, only when running tests (I'm using Jest and RTL). It works fine locally and when deployed to Vercel.

[segersniels]

Sorry for not replying anytime sooner but my original issue has been resolved.

I was using a wrapper package that I wrote that was using an older version of next/image which seemingly stopped working since the latest update because of a mismatch between next versions. Updating the dependency's next version resolved the issue. Unsure what originally caused the issue but so far no longer experiencing any issues.

[imBAOSS]

I just had this problem and managed to solve it. What happened for me was the actual import used. I believe the right import you want to use is with the lowercased version of the "i" in image as opposed to uppercase.

import Image from 'next/Image gave me the invalid src issues not being configured in next.config.js even though it was. The unoptimized={true} param workaround did work for me, but the solution I was looking for was importing with a lowercase i in Image like below:

import Image from 'next/image fixed the issue for me. Importing like this makes the <Image /> component work as expected.

[timneutkens]

Fixed in #26502

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.