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&w=1200&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&w=640&q=75 1x, /_next/image?url=https%3A%2F%2Fimages-na.ssl-images-amazon.com%2Fimages%2FI%2F715ITM21ujL._AC_SL1500_.jpg&w=828&q=75 2x, /_next/image?url=https%3A%2F%2Fimages-na.ssl-images-amazon.com%2Fimages%2FI%2F715ITM21ujL._AC_SL1500_.jpg&w=1200&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'
}