Files
next.js/errors/custom-document-image-import.mdx
T
74a19b7467 docs: unify the header deps by removing # (#72391)
## Summary
Remove redundant `#` from [error
pages](https://github.com/vercel/next.js/tree/canary/errors).

## Description
Follow up #52038 and #72263.
Updated
[template.txt](https://github.com/vercel/next.js/blob/canary/errors/template.txt)
and clarified the header deps.
Then rewrite as per the template.

### Improving Documentation

- [x] Run `pnpm prettier-fix` to fix formatting issues before opening
the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution
follows the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

Co-authored-by: Delba de Oliveira <[email protected]>
2024-11-07 08:58:43 +00:00

49 lines
1.4 KiB
Plaintext

---
title: Images cannot be imported into your custom document.
---
## Why This Error Occurred
An attempt to import an image file into [`pages/_document.js`](/docs/pages/building-your-application/routing/custom-document) 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`](/docs/pages/building-your-application/routing/custom-app) file.
### Example
```jsx filename="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`:
```js filename="next.config.js"
module.exports = {
images: {
disableStaticImages: true,
},
}
```
## Useful Links
- [Custom `Document`](/docs/pages/building-your-application/routing/custom-document)
- [Custom `App`](/docs/pages/building-your-application/routing/custom-app)
- [Static File Serving](/docs/pages/building-your-application/optimizing/static-assets)
- [Disable Static Image Imports](/docs/pages/api-reference/components/image#disablestaticimages)