next/image does not load images from external URL after deployment

Question

I use the Next.js Image component for image optimization. It works great on dev but it doesn't load images from external URLs in production.

What can I do?

Answer 1

You need to set the configuration in the next.config.js file first.

For Example:

on next.config.js

module.exports = {
    images: {
        domains: ['images.unsplash.com'],
    },
}

on pages/your_page_file.tsx

<Image
    alt="The guitarist in the concert."
    src="https://images.unsplash.com/photo-1464375117522-1311d6a5b81f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80"
    width={2250}
    height={1390}
    layout="responsive"
/>

For versions above 12.3.0 this is the accepted approach:

module.exports = {
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'assets.example.com',
                port: '',
                pathname: '/account123/**',
            },
        ],
    },
}

Refer https://nextjs.org/docs/messages/next-image-unconfigured-host