fix(404): fix wrong image size.

fky2015 · Feb 13, 2023 · c1b342d · c1b342d
1 parent 9aa7575
commit c1b342d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/components/Page404.tsx b/components/Page404.tsx
@@ -5,6 +5,7 @@ import * as types from '@/lib/types'
 
 import { PageHead } from './PageHead'
 import styles from './styles.module.css'
+import errImg from 'public/404.png'
 
 export const Page404: React.FC<types.PageProps> = ({ site, pageId, error }) => {
   const title = site?.name || 'Notion Page Not Found'
@@ -28,11 +29,19 @@ export const Page404: React.FC<types.PageProps> = ({ site, pageId, error }) => {
             )
           )}
 
-          <Image
-            src='/404.png'
-            alt='404 Not Found'
+          <div
             className={styles.errorImage}
-          />
+          >
+            <Image
+              src={errImg}
+              alt='404 Not Found'
+              width={errImg.width}
+              height={errImg.height}
+              sizes="(max-width: 768px) 100vw,
+              (max-width: 1200px) 50vw,
+              33vw"
+            />
+          </div>
         </main>
       </div>
     </>

diff --git a/components/styles.module.css b/components/styles.module.css
@@ -37,7 +37,8 @@
 }
 
 .errorImage {
-  max-width: 100%;
+  margin: 0 auto;
+  max-width: 700px;
   width: 640px;
 }