Home
Support Forums

Nextjs external images not loading - works on vercel

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'
}

Hi, @relaxen159. This exact issue is discussed in detail in this topic:

Quoting this GitHub issue:

next export cannot be used with Next.js’ default image loader, as it relies on next start.

To summarize, this is a limitation of Next.js itself. Netlify developer @lindsaylevine also mentions in the topic about that supporting this is on the road map for next-on-netlify but we don’t have an official ETA for this support.

If there are other questions or concerns, please let us know.