Issue Summary

The issue involves image optimization working correctly in the Vercel ecosystem but failing in self-hosting.

Steps to Reproduce

1. Deploy the application on the Docker Platform or on a local server or alternative hosting environment.
2. Went /[orgId]/risk and /[orgId]/vendors page.
3. Image broken as shown in the evidence section.

Actual Results

• Images are displayed correctly and optimized in the Vercel platform. When self-hosting, images do not load, appearing as broken links or missing altogether.

Expected Results

• Images should load and display correctly in both the Vercel environment and self-hosted setups. Image optimization features should function seamlessly, providing improved load times and performance in self-hosting, similar to the Vercel ecosystem.

Technical details

• Browser version: Google Chrome 139.0.7258.155
• Node.js version: v22.19.0
• Docker: Docker version 28.3.2, build 578ccf6

Evidence

In Risk Management Page,

Network request,

Response,

Solution Proposal

Alternatively, we can resolve this issue.

1. By adding an additional prop unoptimized which controls a SELF_HOSTING switch from .env.

<Image
  src={theme === 'dark' ? imageSrcDark : imageSrcLight}
  alt={imageAlt}
  height={400}
  width={400}
  quality={100}
  className="relative z-10 rounded-lg drop-shadow-md"
  unoptimized={SELF_HOSTING ?? false}
 />

2. Set all images as unoptimized in the next.config.ts.

  images: {
    ...,
    unoptimized: SELF_HOSTING ?? false,
  }

I believe adding a switch could potentially resolve the issue. I'd love to hear your thoughts on this and if you have different way to resolve this issue.