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>
-                <img
-                  alt="profile"
-                  className="tw-w-full"
-                  height="150px"
-                  referrerPolicy="no-referrer"
-                  src={image}
-                />
-              </div>
+              <Image
+                alt="profile"
+                className="tw-w-full"
+                preview={false}
+                referrerPolicy="no-referrer"
+                src={image || ''}
+                onError={() => {
+                  SetIsImgUrlValid(false);
+                }}
+              />
             ) : (
               <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
-                            alt="user"
-                            referrerPolicy="no-referrer"
-                            src={profilePicture}
-                          />
-                        </div>
-                      ) : (
-                        <Avatar name={username} width="30" />
-                      )}
-                    </PopOver>
-                  </>
+                  <PopOver
+                    position="bottom"
+                    title="Profile"
+                    trigger="mouseenter">
+                    {isImgUrlValid ? (
+                      <div className="profile-image square tw--mr-2">
+                        <Image
+                          alt="user"
+                          preview={false}
+                          referrerPolicy="no-referrer"
+                          src={profilePicture || ''}
+                          onError={() => {
+                            SetIsImgUrlValid(false);
+                          }}
+                        />
+                      </div>
+                    ) : (
+                      <Avatar name={username} width="30" />
+                    )}
+                  </PopOver>
                 }
                 isDropDownIconVisible={false}
                 type="link"