Next is not serving image files from _document.js

felipero commented 6 years ago

When requiring images from pages/_document.js the file is created by webpack, but next won't serve it. See the image below: screenshot 2018-04-13 18 36 19

I also created a repo to reproduce that: https://github.com/felipero/next_images_bug

arefaslani commented 6 years ago

I've tested it in the _document.js file. This is my Document class:

import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <html>
        <Head>
          <style>{`body { margin: 0 } /* custom! */`}</style>
        </Head>
        <body className="custom_class">
          <img src={require('./image.jpg')} />
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

Image loads properly. Could you copy the image url in the browser and see if it will be served or not at all? Image url should be something like: http://localhost:3000/_next/static/images/image-58c32891708391ddd8065000466a2fac.jpg.

felipero commented 6 years ago

Hi @arefaslani have you seen my repository? There you can easily reproduce the issue.

When I access the image url directly I get 404. The problem is related to different files on server/client. You can take a look at the next-optimized-imagesfix for this: https://github.com/cyrilwanner/next-optimized-images/commit/201223697894f647f8dc0afb5acc68e23941b39b

I also opened an issue there, in case you want to check: https://github.com/cyrilwanner/next-optimized-images/issues/15

arefaslani commented 6 years ago

Hi @felipero. Thank you for reporting the bug and suggesting the fix. I've fixed this issue in 0.10.2 👍

twopluszero / next-images

Next is not serving image files from _document.js #4