next.js: Image optimisation external resource not working
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: ''
}
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 13
- Comments: 22 (3 by maintainers)
@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 thenext.config.js
file.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 ./
Just to share my case too.
on
next.config.js
,i didn’t add
https://
.then on the Image component:
I used the
ImageLoader
like in the docs:At first, i just tried putting the image url on the
src
of theImage
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.Just to share what happened in my case.
I assigned a base URL (together with protocol) instead of a hostname (without protocol)
Changing
https://mydomain.com
tomydomain.com
fixed the issue.I got this issue after deploying Next.js app to firebase hosting with firebase functions…
As far as I understand, nextjs optimize images wrapped by
<Image>
on runtime. Which means addingnext.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 addingnext.config.js
for production.Might need to split
next.config.js
for build and production (runtime, which only includes image configuration)That was it @badsyntax, thank you!
@mshahzaib101 did you find any solution? Image works fine on local but fails after deployment. In my case I deployed to GAE.
@maurusrv if you use a custom loader on the Image component then none of the images.domains configuration in next.config.js matters.
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.
@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 😄
@dipesh429 no man, didnt get the solution yet…