next/image not showing images on netlify - works on vercel

[thomas159]

I am using the next/image component and locally it loads external images correctly, however I have just deployed to netlify and it is not loading external images.

The src looks the same both locally and on netlify, do I need to change anything in the config?

src

<img alt="5 Pcs/set Deluxe Wine Accessories Gift Set" src="/_next/image?url=https%3A%2F%2Fimages-na.ssl-images-amazon.com%2Fimages%2FI%2F715ITM21ujL._AC_SL1500_.jpg&amp;w=1200&amp;q=75" decoding="async" class="Product__StyledImage-jcje5z-7 fGaLBM" style="visibility: visible; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;" srcset="/_next/image?url=https%3A%2F%2Fimages-na.ssl-images-amazon.com%2Fimages%2FI%2F715ITM21ujL._AC_SL1500_.jpg&amp;w=640&amp;q=75 1x, /_next/image?url=https%3A%2F%2Fimages-na.ssl-images-amazon.com%2Fimages%2FI%2F715ITM21ujL._AC_SL1500_.jpg&amp;w=828&amp;q=75 2x, /_next/image?url=https%3A%2F%2Fimages-na.ssl-images-amazon.com%2Fimages%2FI%2F715ITM21ujL._AC_SL1500_.jpg&amp;w=1200&amp;q=75 3x">

Product.js

const StyledImage = styled(Image)`
  border-radius: 20px;
`

const Product = ({ id, cat, slug, img, name, desc, price }) => {
  return (
    <A href={slug} target="_blank">
      <ImgWrap>
        <StyledImage src={img} alt={name} width={400} height={400} />
      </ImgWrap>
      <InfoWrap>
        <Title>{name}</Title>
        <Desc>{desc}</Desc>
      </InfoWrap>
      <Price>
        £{price} <Buy>Visit</Buy>
      </Price>
    </A>
  )
}

next.config.js

module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    domains: [
      'images-na.ssl-images-amazon.com',
      'images.buyagift.co.uk',
      'cdn.shopify.com'
    ],
    loader: 'default'
    // path: 'https://dl.dropboxusercontent.com/',
  },
  target: 'serverless'
}

[leerob]

Are you dual deploying to both?

It sounds like this is an issue with Netlify's support for Next.js. You might have better luck opening an issue here so the maintainers know 👍

[barhouum7]

In my case, I was facing issues with Next.js Image component adding the /_next/image prefix, which prevented images from loading and caused problems with middleware routing in my multi-tenant setup.
If you do too, the fix is pretty simple: just exclude the image optimization routes from your middleware.
In your middleware file, update the matcher to exclude /_next/image like so:

export const config = {
       matcher: ['/((?!_next/image).*)'],
}

This prevents the middleware from interfering with Next.js image optimization; This way, Next.js can still handle image optimization natively without issues.
No need for custom loaders to fix this issue.