fix(web): async load images (#1714)

apps/web/src/pages/invite/[invite_code].tsx

@@ -6,13 +6,11 @@ import {
   UnsucessfulDuotoneIcon,
 } from '@blocksuite/icons';
 import { NoSsr } from '@mui/material';
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import { useRouter } from 'next/router';
 import { Suspense } from 'react';
 import useSWR from 'swr';
 
-import inviteError from '../../../public/imgs/invite-error.svg';
-import inviteSuccess from '../../../public/imgs/invite-success.svg';
 import { PageLoading } from '../../components/pure/loading';
 import { RouteLogic, useRouterHelper } from '../../hooks/use-router-helper';
 import { QueryKey } from '../../plugins/affine/fetcher';
@@ -31,7 +29,7 @@ const InvitePage: NextPageWithLayout = () => {
   if (inviteData?.accepted) {
     return (
       <StyledContainer>
-        <Image src={inviteSuccess} alt="" />
+        <Image src="/imgs/invite-success.svg" alt="" />
         <Button
           type="primary"
           shape="round"
@@ -56,7 +54,7 @@ const InvitePage: NextPageWithLayout = () => {
   if (inviteData?.accepted === false) {
     return (
       <StyledContainer>
-        <Image src={inviteError} alt="" />
+        <Image src="/imgs/invite-error.svg" alt="" />
         <Button
           shape="round"
           onClick={() => {