From 99893317d3da068da074db503f743dfb5060c8a3 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Mon, 22 Sep 2025 13:49:21 +0200
Subject: [PATCH] fix(login): remove image optimization entirely (#10702)

This PR completely removes Next.js image optimization from the login app
by replacing all next/image components with standard HTML <img> tags and
removing the image optimization configuration.

Closes https://github.com/zitadel/zitadel-charts/issues/381

# Which Problems Are Solved

Users were encountering issue when loading images in dedicated
environments. These happened due to nextjs imaging optimizations
creating different paths for images.

# How the Problems Are Solved

- Removed Next.js Image Optimization Config
- Removed images: { unoptimized: true } configuration from
[next.config.mjs](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-browser/workbench/workbench.html)
This config was redundant since we no longer use next/image components
- Replaced next/image with standard <img> tags

(cherry picked from commit 0a31f4ba2b7ae7e114248abaf083b73f77f62bcc)
---
 apps/login/.eslintrc.cjs                   |  6 ++++++
 apps/login/next.config.mjs                 |  3 ---
 apps/login/src/components/app-avatar.tsx   |  3 +--
 apps/login/src/components/avatar.tsx       | 20 ++++----------------
 apps/login/src/components/logo.tsx         | 18 ++----------------
 apps/login/src/components/zitadel-logo.tsx | 17 ++---------------
 6 files changed, 15 insertions(+), 52 deletions(-)

diff --git a/apps/login/.eslintrc.cjs b/apps/login/.eslintrc.cjs
index d704a7f0c3d..bbca76e6c9a 100644
--- a/apps/login/.eslintrc.cjs
+++ b/apps/login/.eslintrc.cjs
@@ -12,6 +12,12 @@ module.exports = {
       varsIgnorePattern: "^_" ,
     }],
     "no-undef": "off",
+    "no-restricted-imports": ["error", {
+      "paths": [{
+        "name": "next/image",
+        "message": "Use of next/image is forbidden. Use regular <img> elements instead."
+      }]
+    }],
   },
   parserOptions: {
     ecmaVersion: "latest",
diff --git a/apps/login/next.config.mjs b/apps/login/next.config.mjs
index e4f2de05eaf..7d12d78867f 100755
--- a/apps/login/next.config.mjs
+++ b/apps/login/next.config.mjs
@@ -42,9 +42,6 @@ const nextConfig = {
     // Add React 19 compatibility optimizations
     optimizePackageImports: ['@radix-ui/react-tooltip', '@heroicons/react'],
   },
-  images: {
-    unoptimized: true
-  },
   eslint: {
     ignoreDuringBuilds: true,
   },
diff --git a/apps/login/src/components/app-avatar.tsx b/apps/login/src/components/app-avatar.tsx
index 84879d08acf..8686043fa0f 100644
--- a/apps/login/src/components/app-avatar.tsx
+++ b/apps/login/src/components/app-avatar.tsx
@@ -1,6 +1,5 @@
 import { ColorShade, getColorHash } from "@/helpers/colors";
 import { useTheme } from "next-themes";
-import Image from "next/image";
 import { getInitials } from "./avatar";
 
 interface AvatarProps {
@@ -33,7 +32,7 @@ export function AppAvatar({ appName, imageUrl, shadow }: AvatarProps) {
       style={resolvedTheme === "light" ? avatarStyleLight : avatarStyleDark}
     >
       {imageUrl ? (
-        <Image
+        <img
           height={48}
           width={48}
           alt="avatar"
diff --git a/apps/login/src/components/avatar.tsx b/apps/login/src/components/avatar.tsx
index 306e201821d..e17905e633c 100644
--- a/apps/login/src/components/avatar.tsx
+++ b/apps/login/src/components/avatar.tsx
@@ -2,7 +2,6 @@
 
 import { ColorShade, getColorHash } from "@/helpers/colors";
 import { useTheme } from "next-themes";
-import Image from "next/image";
 
 interface AvatarProps {
   name: string | null | undefined;
@@ -17,8 +16,7 @@ export function getInitials(name: string, loginName: string) {
   if (name) {
     const split = name.split(" ");
     if (split) {
-      const initials =
-        split[0].charAt(0) + (split[1] ? split[1].charAt(0) : "");
+      const initials = split[0].charAt(0) + (split[1] ? split[1].charAt(0) : "");
       credentials = initials;
     } else {
       credentials = name.charAt(0);
@@ -40,13 +38,7 @@ export function getInitials(name: string, loginName: string) {
   return credentials;
 }
 
-export function Avatar({
-  size = "base",
-  name,
-  loginName,
-  imageUrl,
-  shadow,
-}: AvatarProps) {
+export function Avatar({ size = "base", name, loginName, imageUrl, shadow }: AvatarProps) {
   const { resolvedTheme } = useTheme();
   const credentials = getInitials(name ?? loginName, loginName);
 
@@ -78,7 +70,7 @@ export function Avatar({
       style={resolvedTheme === "light" ? avatarStyleLight : avatarStyleDark}
     >
       {imageUrl ? (
-        <Image
+        <img
           height={48}
           width={48}
           alt="avatar"
@@ -86,11 +78,7 @@ export function Avatar({
           src={imageUrl}
         />
       ) : (
-        <span
-          className={`uppercase ${size === "large" ? "text-xl" : "text-13px"}`}
-        >
-          {credentials}
-        </span>
+        <span className={`uppercase ${size === "large" ? "text-xl" : "text-13px"}`}>{credentials}</span>
       )}
     </div>
   );
diff --git a/apps/login/src/components/logo.tsx b/apps/login/src/components/logo.tsx
index 09819f2ac35..b56d7a0a6f1 100644
--- a/apps/login/src/components/logo.tsx
+++ b/apps/login/src/components/logo.tsx
@@ -1,5 +1,3 @@
-import Image from "next/image";
-
 type Props = {
   darkSrc?: string;
   lightSrc?: string;
@@ -12,24 +10,12 @@ export function Logo({ lightSrc, darkSrc, height = 40, width = 147.5 }: Props) {
     <>
       {darkSrc && (
         <div className="hidden dark:flex">
-          <Image
-            height={height}
-            width={width}
-            src={darkSrc}
-            alt="logo"
-            priority={true}
-          />
+          <img height={height} width={width} src={darkSrc} alt="logo" />
         </div>
       )}
       {lightSrc && (
         <div className="flex dark:hidden">
-          <Image
-            height={height}
-            width={width}
-            priority={true}
-            src={lightSrc}
-            alt="logo"
-          />
+          <img height={height} width={width} src={lightSrc} alt="logo" />
         </div>
       )}
     </>
diff --git a/apps/login/src/components/zitadel-logo.tsx b/apps/login/src/components/zitadel-logo.tsx
index 105665fbba7..472e879624f 100644
--- a/apps/login/src/components/zitadel-logo.tsx
+++ b/apps/login/src/components/zitadel-logo.tsx
@@ -1,4 +1,3 @@
-import Image from "next/image";
 type Props = {
   height?: number;
   width?: number;
@@ -10,22 +9,10 @@ export function ZitadelLogo({ height = 40, width = 147.5 }: Props) {
       <div className="hidden dark:flex">
         {/* <ZitadelLogoLight /> */}
 
-        <Image
-          height={height}
-          width={width}
-          src="/zitadel-logo-light.svg"
-          alt="zitadel logo"
-          priority={true}
-        />
+        <img height={height} width={width} src="/zitadel-logo-light.svg" alt="zitadel logo" />
       </div>
       <div className="flex dark:hidden">
-        <Image
-          height={height}
-          width={width}
-          priority={true}
-          src="/zitadel-logo-dark.svg"
-          alt="zitadel logo"
-        />
+        <img height={height} width={width} src="/zitadel-logo-dark.svg" alt="zitadel logo" />
       </div>
     </>
   );