`next/image` Un-configured Host
Why This Error Occurred
One of your pages that leverages the next/image
component, passed a src
value that uses a hostname in the URL that isn't defined in the images.remotePatterns
in next.config.js
.
Possible Ways to Fix It
Add the protocol, hostname, port, and pathname to the images.remotePatterns
config in next.config.js
:
next.config.js
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'assets.example.com',
port: '',
pathname: '/account123/**',
search: '',
},
],
},
}
Fixing older versions of Next.js
Using Next.js prior to 12.3.0?
Older versions of Next.js can configure images.domains
instead:
next.config.js
module.exports = {
images: {
domains: ['assets.example.com'],
},
}
Useful Links
Was this helpful?