fix: update mentor profile image rendering

next.config.mjs

@@ -11,6 +11,7 @@ const nextConfig = {
     return config;
   },
   images: {
+    unoptimized: true,
     remotePatterns: [
       {
         protocol: 'https',

playwright-tests/tests/navigation.page.spec.ts

@@ -159,6 +159,7 @@ test.describe('Validate Navigation', () => {
       async ({ page }) => {
         await expect(page.getByRole('banner')).toHaveScreenshot(
           'nav-mobile-closed.png',
+          { maxDiffPixels: 100 },
         );
       },
     );

playwright-tests/utils/datafactory/nav.tests.ts

@@ -57,7 +57,7 @@ export const aboutUsMenuItems = items.map(([name, url, text]) => ({
   expectedText: text,
 }));
 const mentorshipItems = [
-  ['Overview', '/'],
+  ['Overview', '/mentorship'],
   ['Mentors', '/mentorship/mentors'],
   ['Study Groups', '/mentorship/study-groups'],
   ['Resources', '/mentorship/resources'],

src/components/MentorProfileCard.tsx

@@ -5,7 +5,7 @@ import StarIcon from '@mui/icons-material/Star';
 import TwitterIcon from '@mui/icons-material/Twitter';
 import { Box, Icon, Tab, Tabs, Typography } from '@mui/material';
 import Image from 'next/image';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { LinkButton } from '@components';
 import { useIsMobile } from '@utils/theme-utils';
@@ -48,13 +48,21 @@ function TabPanel(props: TabPanelProps) {
   );
 }
 
+const FALLBACK_IMAGE = '/profile-illustration-female-fallback.jpg';
+
 export const MentorProfileCard: React.FC<MentorProfileCardProps> = ({
   mentor,
 }) => {
   const [tab, setTab] = useState(0);
   const handleTabChange = (_: React.SyntheticEvent, newValue: number) =>
     setTab(newValue);
   const isMobile = useIsMobile();
+  const [imgSrc, setImgSrc] = useState(
+    mentor.images[0]?.path || FALLBACK_IMAGE,
+  );
+  const handleImageError = useCallback(() => {
+    setImgSrc(FALLBACK_IMAGE);
+  }, []);
 
   return (
     <Box
@@ -93,16 +101,14 @@ export const MentorProfileCard: React.FC<MentorProfileCardProps> = ({
           }}
         >
           <Image
-            src={
-              mentor.images[0]?.path ||
-              '/profile-illustration-female-fallback.jpg'
-            }
+            src={imgSrc}
             alt={
               mentor.images[0]?.alt ||
               'Profile Illustration Fallback - Image by rawpixel.com on Freepik'
             }
             width={120}
             height={120}
+            onError={handleImageError}
             style={{
               objectFit: 'cover',
               borderRadius: '100%',