From 26b030ecda4095f57de7e7680198a276e3b696ea Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Mon, 27 Mar 2023 23:35:33 -0500
Subject: [PATCH] fix(web): async load images (#1714)

---
 apps/web/src/pages/404.tsx                  | 6 ++----
 apps/web/src/pages/invite/[invite_code].tsx | 8 +++-----
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/pages/404.tsx b/apps/web/src/pages/404.tsx
index 3d1dea4ee3..a40b609ac3 100644
--- a/apps/web/src/pages/404.tsx
+++ b/apps/web/src/pages/404.tsx
@@ -1,12 +1,10 @@
 import { Button, displayFlex, styled } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import Head from 'next/head';
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import ErrorImg from '../../public/imgs/invite-error.svg';
-
 export const StyledContainer = styled('div')(() => {
   return {
     ...displayFlex('center', 'center'),
@@ -30,7 +28,7 @@ export const NotfoundPage = () => {
   const router = useRouter();
   return (
     <StyledContainer data-testid="notFound">
-      <Image alt="404" src={ErrorImg}></Image>
+      <Image alt="404" src="/imgs/invite-error.svg"></Image>
 
       <p>{t('404 - Page Not Found')}</p>
       <Button
diff --git a/apps/web/src/pages/invite/[invite_code].tsx b/apps/web/src/pages/invite/[invite_code].tsx
index 32c5c362c9..c800479d4c 100644
--- a/apps/web/src/pages/invite/[invite_code].tsx
+++ b/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={() => {