rsnext/errors/custom-document-image-import.md
Alexandru Tasica e4bf1a515c
Docs: missing parenthesis on example (#37156)
Missing close parenthesis on docs example from page custom-document-image-import.md

## Bug

- [x] Related issues linked using `fixes #37155`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-05-24 15:01:56 +00:00

1.4 KiB

Images cannot be imported into your custom document.

Why This Error Occurred

An attempt to import an image file into pages/_document.js was made.

Custom documents aren't compiled for the browser and images statically imported like this will not be displayed.

Possible Ways to Fix It

If your image needs to be displayed on every page you can relocate it to your pages/_app.js file.

Example

//pages/_app.js
import yourImage from 'path/to/your/image'
import Image from 'next/image'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Image src={yourImage} alt="your_image_description" />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

If your application is not using image imports with next/image, you can disable the built-in loader with the following next.config.js:

module.exports = {
  images: {
    disableStaticImages: true,
  },
}