UI: Fixed the issue with profile picture not showing properly (#7329)

* Fixed the issue with profile picture not showing properly

* minor bug fix

* removed preview for Images

openmetadata-ui/src/main/resources/ui/src/axiosAPIs/userAPI.ts

@@ -185,9 +185,3 @@ export const getGroupTypeTeams = async () => {
 
   return response.data;
 };
-
-export const checkValidImage = async (url: string) => {
-  const response = await APIClient(url);
-
-  return response.status;
-};

openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx

@@ -12,7 +12,7 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Card, Space, Switch } from 'antd';
+import { Card, Image, Space, Switch } from 'antd';
 import { AxiosError } from 'axios';
 import { capitalize, isEmpty, isEqual, isNil, toLower } from 'lodash';
 import { observer } from 'mobx-react';
@@ -28,7 +28,6 @@ import { useHistory, useLocation } from 'react-router-dom';
 import Select from 'react-select';
 import AppState from '../../AppState';
 import { getTeams } from '../../axiosAPIs/teamsAPI';
-import { checkValidImage } from '../../axiosAPIs/userAPI';
 import { getUserPath, TERM_ADMIN } from '../../constants/constants';
 import { observerOptions } from '../../constants/Mydata.constants';
 import {
@@ -102,7 +101,7 @@ const Users = ({
   const [roles, setRoles] = useState<Array<Role>>([]);
   const history = useHistory();
   const [showFilterList, setShowFilterList] = useState(false);
-  const [isImgUrlValid, SetIsImgUrlValid] = useState<boolean>(false);
+  const [isImgUrlValid, SetIsImgUrlValid] = useState<boolean>(true);
 
   const location = useLocation();
 
@@ -635,15 +634,16 @@ const Users = ({
           }}>
           <div className="tw-flex tw-flex-col">
             {isImgUrlValid ? (
-              <div>
+              <Image
-                <img
                 alt="profile"
                 className="tw-w-full"
-                  height="150px"
+                preview={false}
                 referrerPolicy="no-referrer"
-                  src={image}
+                src={image || ''}
+                onError={() => {
+                  SetIsImgUrlValid(false);
+                }}
               />
-              </div>
             ) : (
               <div style={{ width: 'inherit' }}>
                 <ProfilePicture
@@ -767,16 +767,6 @@ const Users = ({
     }
   };
 
-  const validateImgUrl = useCallback(async (url: string) => {
-    const response = await checkValidImage(url);
-
-    SetIsImgUrlValid(response === 200);
-  }, []);
-
-  useEffect(() => {
-    image && validateImgUrl(image);
-  }, [image]);
-
   useEffect(() => {
     fetchMoreFeed(isInView as boolean, paging, isFeedLoading);
   }, [isInView, paging, isFeedLoading]);

openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx

@@ -11,13 +11,12 @@
  *  limitations under the License.
  */
 
-import { Badge, Dropdown, Input, Space } from 'antd';
+import { Badge, Dropdown, Image, Input, Space } from 'antd';
 import { debounce, toString } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link, NavLink, useHistory } from 'react-router-dom';
 import AppState from '../../AppState';
 import Logo from '../../assets/svg/logo-monogram.svg';
-import { checkValidImage } from '../../axiosAPIs/userAPI';
 import {
   NOTIFICATION_READ_TIMER,
   ROUTES,
@@ -73,7 +72,7 @@ const NavBar = ({
   const [hasMentionNotification, setHasMentionNotification] =
     useState<boolean>(false);
   const [activeTab, setActiveTab] = useState<string>('Task');
-  const [isImgUrlValid, SetIsImgUrlValid] = useState<boolean>(false);
+  const [isImgUrlValid, SetIsImgUrlValid] = useState<boolean>(true);
 
   const profilePicture = useMemo(
     () => AppState?.userDetails?.profile?.images?.image512,
@@ -172,16 +171,6 @@ const NavBar = ({
     };
   };
 
-  const validateImgUrl = useCallback(async (url: string) => {
-    const response = await checkValidImage(url);
-
-    SetIsImgUrlValid(response === 200);
-  }, []);
-
-  useEffect(() => {
-    profilePicture && validateImgUrl(profilePicture);
-  }, [profilePicture, validateImgUrl]);
-
   useEffect(() => {
     if (shouldRequestPermission()) {
       Notification.requestPermission();
@@ -400,24 +389,26 @@ const NavBar = ({
               <DropDown
                 dropDownList={profileDropdown}
                 icon={
-                  <>
                   <PopOver
                     position="bottom"
                     title="Profile"
                     trigger="mouseenter">
                     {isImgUrlValid ? (
                       <div className="profile-image square tw--mr-2">
-                          <img
+                        <Image
                           alt="user"
+                          preview={false}
                           referrerPolicy="no-referrer"
-                            src={profilePicture}
+                          src={profilePicture || ''}
+                          onError={() => {
+                            SetIsImgUrlValid(false);
+                          }}
                         />
                       </div>
                     ) : (
                       <Avatar name={username} width="30" />
                     )}
                   </PopOver>
-                  </>
                 }
                 isDropDownIconVisible={false}
                 type="link"