44d1a1cb15
This PR is part of a larger effort to migrate error messages to MDX and use App Router: https://github.com/vercel/front/pull/23459
48 lines
1.1 KiB
Text
48 lines
1.1 KiB
Text
---
|
|
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)
|