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 0a31f4ba2b)

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",

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,
   },

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"

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>
   );

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>
       )}
     </>

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>
     </>
   );