I’m experiencing an issue with image loading in my Next.js portfolio project. The images work perfectly when running locally with npm run dev, but they fail to load on the Vercel deployment.
Project Details:
- Next.js 14
- Images are stored in the public directory
- Using Next.js Image component
- TypeScript and Tailwind CSS
Current Setup:
- Images are properly placed in the public directory
- Using next/image component with proper configurations
- next.config.js includes image configurations with unoptimized: true and proper remotePatterns
What I’ve Tried:
- Updated next.config.js with various image configurations
- Created a custom Image component with error handling
- Verified all image paths are correct
- Confirmed images work perfectly in local development
Current next.config.js:
javascript
const nextConfig = {
output: 'standalone',
images: {
unoptimized: true,
domains: [''],
remotePatterns: [
{
protocol: 'https',
hostname: '',
},
{
protocol: 'http',
hostname: '',
}
],
}
}
The issue persists despite multiple deployments and configuration changes. Looking for guidance on what might be causing this discrepancy between local and production environments.
Repository: GitHub - Risad-Raihan/risadfindingpattern
Deployment URL: https://risadfindingpattern.vercel.app/
