Image optimisation external resource not working

[klaaz0r]

Bug report

Describe the bug

When optimising images from external sources I get the following error in production:

"url" parameter is not allowed

To Reproduce

Images are coming from: images.example.com

next.config.js has:

 images: {
      domains: ["images.example.com"],
    },

Expected behavior

The images should also be optimised in production/ from an external source.

Inside the PR for optimised images (https://github.com/vercel/next.js/pull/17749/files)

You can see where the error comes from but I am not sure why it is thrown, I am using a custom server but should not be a problem since it seems to work locally.

I added some logging to the code to check the inputs but based on this I do not find anything that would suggest !domains.includes(hrefParsed.hostname) this line would turn true

domains [ 'images.brabble.fm' ]
hrefParsed URL {
  href: 'https://images.brabble.fm/6f76e696-8ef1-46ff-be47-b7f85f14f36b.jpeg',
  origin: 'https://images.brabble.fm',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'images.brabble.fm',
  hostname: 'images.brabble.fm',
  port: '',
  pathname: '/6f76e696-8ef1-46ff-be47-b7f85f14f36b.jpeg',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}

[klaaz0r]

next.js/packages/next/next-server/server/image-optimizer.ts

Line 91 in 44fe971

res.end('"url" parameter is not allowed')

Exact line from where the error in thrown

[styfle]

Did you restart next dev or next start after changing the next.config.js file?

You should see a message that says "Restart the server to see the changes in effect" when you change next.config.js and the server is running.

With CodeSandbox, I had to click "Restart Server" in the left menubar.

[mshahzaib101]

I got this issue after deploying Next.js app to firebase hosting with firebase functions..

[dipeshhkc]

@mshahzaib101 did you find any solution? Image works fine on local but fails after deployment. In my case I deployed to GAE.

[mshahzaib101]

@dipesh429 no man, didnt get the solution yet..

[dipeshhkc]

@mshahzaib101 It did work on my project finally. The problem was to include 'domain' in next.config.js. Link.

For me I have a lerna project setup, so I had next.config.js for each project and one next.config.js on the root as well. I previously had included 'domain' on each projects's next.config.js. But I actually need to put it in the root next.config.js.
Hope this helps 😄

[raphaelbs]

I'm having the same issue when trying to display an avatar image from GitHub.

Local it works:

http://localhost:3000/_next/image?url=https%3A%2F%2Favatars3.githubusercontent.com%2Fu%2F11169832%3Fu%3D7f8a940ecea05f9e64d56d366920e4c4298cd408%26v%3D4&w=32&q=75

On my production deploy it doesn't:

https://[my private URL]/_next/image?url=https%3A%2F%2Favatars3.githubusercontent.com%2Fu%2F11169832%3Fu%3D7f8a940ecea05f9e64d56d366920e4c4298cd408%26v%3D4&w=32&q=75

My next.config.js:

module.exports = {
  images: {
    domains: [
      'avatars3.githubusercontent.com',
      '[my private URL]'
    ],
  },

[badsyntax]

@raphaelbs I had a similar issue, in that it worked locally but not in prod, and it turned out my next.config.js file was not copied into my prod docker container. So i'd double check you're definitely deploying the next.config.js file.

[raphaelbs]

That was it @badsyntax, thank you!

[1ambda]

As far as I understand, nextjs optimize images wrapped by <Image> on runtime. Which means adding next.config.js requires all other dev dependencies (e.g., next-compose-plugin, ...) and source code (style.less if we do use less) , I am not sure about adding next.config.js for production.

Might need to split next.config.js for build and production (runtime, which only includes image configuration)

[jacklimwenjie]

Just to share what happened in my case.

I assigned a base URL (together with protocol) instead of a hostname (without protocol)

module.exports = {
  images: {
    domains: ['https://mydomain.com'],
  },

Changing https://mydomain.com to mydomain.com fixed the issue.

[maurusrv]

Just to share my case too.

on next.config.js,

images: {
  domains: ["images.example.com"],
},

i didn't add https://.

then on the Image component:

I used the ImageLoader like in the docs:

import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://images.example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

At first, i just tried putting the image url on the src of the Image component, but it turns out, just putting its base url in the domain part of the config seems to not be enough. It still just tries to get the image from the domain of your app. So using the loader lets you configure it correspondingly.

[beingadrian]

One thing I'd like to add to @badsyntax's comment is that the next.config.js file seems to be required for both the build and start phases.

So for a Docker setup, especially if it's a multi-stage build configuration, make sure that the next.config.js file is available within the same directory where next build and next start will be called.

[gavranha]

Just to share what happened in my case.

I assigned a base URL (together with protocol) instead of a hostname (without protocol)

module.exports = {
  images: {
    domains: ['https://mydomain.com'],
  },

Changing https://mydomain.com to mydomain.com fixed the issue.

just removing protocol fixed the issue for me :)
thanks @jacklimwenjie

[adjieguntoro-tokped]

I want to share my case.

If you use docker and refer to official docs from nextjs https://nextjs.org/docs/deployment#docker-image
you need to uncomment this line, to make sure next.config.js file is available.
# COPY --from=builder /app/next.config.js ./

[andrewsrichardson]

For anyone running into this on Netlify, add the domains as an env variable 'NEXT_IMAGE_ALLOWED_DOMAINS'. Theres a note about it in the deploy script, but no error is thrown so it's not obvious you'd need to look there.

[wereHamster]

@maurusrv if you use a custom loader on the Image component then none of the images.domains configuration in next.config.js matters.

[mrjackyliang]

Did anyone ever end up figuring this out for Firebase. Images are not loading even for a create-next-app project

[mrjackyliang]

So I found an issue with Firebase functions. I think Next is attempting to write to an unwritable directory, so that's why it's having 500 errors. It has nothing to do with the image being external or internal.

[maurusrv]

@maurusrv if you use a custom loader on the Image component then none of the images.domains configuration in next.config.js matters.

good to know @wereHamster. i could just remove the line in my next config then.

[tcode92]

here to share my expirience too, i have a nodejs server to save/serve images to nextjs app, and i have a rewrite to force https and www, so in nextjs config if your webserver force redirect to www you need to add it too since it's a subdomain.
from "example.com" to "www.example.com" worked for me.

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