Fix: Images not loading in Next.js production error

The ‘Images not loading in Next.js production’ error occurs when images fail to load in production builds due to incorrect configuration, missing domains, or improper image optimization settings. This is a common issue when deploying Next.js applications.

---

How the Error Happens

❌ Error Scenario - External Image Without Domain Configuration:

// ❌ This won't work in production
// app/page.js
import Image from 'next/image';

export default function HomePage() {
  return (
    <div>
      {/* ❌ External image without domain configuration */}
      <Image 
        src="https://example.com/image.jpg" 
        alt="External Image"
        width={500}
        height={300}
      />
    </div>
  );
}

❌ Error with Incorrect Path:

// ❌ This won't work in production
// app/page.js
import Image from 'next/image';

export default function HomePage() {
  return (
    <div>
      {/* ❌ Relative path that doesn't exist in production */}
      <Image 
        src="../assets/image.jpg" 
        alt="Local Image"
        width={500}
        height={300}
      />
    </div>
  );
}

---

✅ Quick Fix - Proper Image Configuration

Solution 1: Configure Remote Domains

// ✅ Configure next.config.js for remote images
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: [
      'example.com',           // ✅ Add your image domains
      'images.unsplash.com',   // ✅ Unsplash
      'avatars.githubusercontent.com', // ✅ GitHub avatars
      'cdn.example.com'        // ✅ Your CDN
    ],
    // ✅ Or use remotePatterns for more flexibility
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/images/**',
      },
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
        port: '',
        pathname: '/**',
      },
    ],
  },
};

module.exports = nextConfig;

// ✅ Now external images will work
// app/page.js
import Image from 'next/image';

export default function HomePage() {
  return (
    <div>
      <Image 
        src="https://example.com/image.jpg" 
        alt="External Image"
        width={500}
        height={300}
        // ✅ Add priority for above-the-fold images
        priority
      />
    </div>
  );
}

Solution 2: Proper Local Image Placement

// ✅ Place images in public directory
// public/images/logo.png

// app/page.js
import Image from 'next/image';

export default function HomePage() {
  return (
    <div>
      {/* ✅ Local image from public directory */}
      <Image 
        src="/images/logo.png" 
        alt="Logo"
        width={200}
        height={100}
      />
    </div>
  );
}

Solution 3: Using Static Import for Local Images

// ✅ Import images directly
// app/page.js
import Image from 'next/image';
import logo from '../public/images/logo.png'; // ✅ Static import

export default function HomePage() {
  return (
    <div>
      {/* ✅ Using imported image */}
      <Image 
        src={logo} 
        alt="Logo"
        // ✅ Don't specify width/height if using imported images
        // width and height will be inferred
      />
    </div>
  );
}

Solution 4: Dynamic Image Loading with Error Handling

// ✅ Image component with error handling
// components/SafeImage.js
'use client';

import Image from 'next/image';
import { useState } from 'react';

export default function SafeImage({ src, alt, ...props }) {
  const [imageSrc, setImageSrc] = useState(src);
  const [hasError, setHasError] = useState(false);

  const handleError = () => {
    // ✅ Fallback to placeholder if image fails to load
    setImageSrc('/images/placeholder.png');
    setHasError(true);
  };

  return (
    <div>
      <Image
        src={imageSrc}
        alt={alt}
        onError={handleError}
        {...props}
      />
      {hasError && <p className="text-gray-500 text-sm">Image not available</p>}
    </div>
  );
}

// ✅ Using the safe image component
// app/page.js
import SafeImage from './components/SafeImage';

export default function HomePage() {
  return (
    <div>
      <SafeImage 
        src="https://example.com/image.jpg" 
        alt="External Image"
        width={500}
        height={300}
      />
    </div>
  );
}

Solution 5: Optimized Image Loading Strategy

// ✅ Optimized image component with loading strategies
// components/OptimizedImage.js
'use client';

import Image from 'next/image';
import { useState } from 'react';

export default function OptimizedImage({ 
  src, 
  alt, 
  priority = false, 
  fill = false, 
  ...props 
}) {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <div className={`relative overflow-hidden ${isLoading ? 'bg-gray-200' : ''}`}>
      <Image
        src={src}
        alt={alt}
        priority={priority}
        fill={fill}
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        onLoadingComplete={() => setIsLoading(false)}
        {...props}
      />
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="animate-pulse bg-gray-300 rounded-full w-8 h-8"></div>
        </div>
      )}
    </div>
  );
}

// ✅ Using optimized image component
// app/page.js
import OptimizedImage from './components/OptimizedImage';

export default function HomePage() {
  return (
    <div>
      <OptimizedImage 
        src="https://example.com/image.jpg" 
        alt="Optimized Image"
        width={500}
        height={300}
        priority
      />
    </div>
  );
}