[#3413] fix(web): fix logo error (#3416)

### What changes were proposed in this pull request?

fix next/image component src issue

### Why are the changes needed?

Fix: #3413

### Does this PR introduce _any_ user-facing change?
Before
<img width="192" alt="image"
src="https://github.com/datastrato/gravitino/assets/9210625/2fb06a60-47fa-4695-b00d-059e54e3ab9a">
After
<img width="179" alt="image"
src="https://github.com/datastrato/gravitino/assets/9210625/d89abfe0-db4e-45ef-9ea5-bd3a2cf2196e">


### How was this patch tested?

smoke test

web/src/app/rootLayout/AppBar.js

@@ -41,6 +41,7 @@ const AppBar = () => {
   const dispatch = useAppDispatch()
   const [metalakes, setMetalakes] = useState([])
   const router = useRouter()
+  const logoSrc = (process.env.NEXT_PUBLIC_BASE_PATH ?? '') + '/icons/gravitino.svg'
 
   useEffect(() => {
     if (!store.metalakes.length && metalake) {
@@ -69,12 +70,7 @@ const AppBar = () => {
             }
           >
             <Link href='/metalakes' className={'twc-flex twc-items-center twc-no-underline twc-mr-8'}>
-              <Image
-                src={process.env.NEXT_PUBLIC_BASE_PATH ?? '' + '/icons/gravitino.svg'}
-                width={32}
-                height={32}
-                alt='logo'
-              />
+              <Image src={logoSrc} overrideSrc={logoSrc} width={32} height={32} alt='logo' />
               <Typography
                 variant='h5'
                 className={clsx(