rsnext/errors/next-image-unconfigured-host.mdx

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

49 lines
1.1 KiB
Text
Raw Permalink Normal View History

---
title: '`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`:
```js filename="next.config.js"
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'assets.example.com',
port: '',
pathname: '/account123/**',
},
],
},
}
```
#### Fixing older versions of Next.js
<details>
<summary>Using Next.js prior to 12.3.0?</summary>
Older versions of Next.js can configure `images.domains` instead:
```js filename="next.config.js"
module.exports = {
images: {
domains: ['assets.example.com'],
},
}
```
</details>
## Useful Links
- [Image Optimization Documentation](/docs/pages/building-your-application/optimizing/images)
- [Remote Patterns Documentation](/docs/pages/api-reference/components/image#remotepatterns)