fix: optimize Image component (#168)

moonlitgrace · Oct 30, 2024 · 4e21863 · 4e21863
1 parent fc31fd8
commit 4e21863
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/app/(routes)/(main)/blog/[slug]/page.tsx b/app/(routes)/(main)/blog/[slug]/page.tsx
@@ -91,7 +91,6 @@ export default async function Page({ params }: { params: { slug: string } }) {
             priority={true}
             width={0}
             height={0}
-            sizes="100vw"
             style={{ width: '100%', height: 'auto' }}
             className="rounded-2xl"
           />

diff --git a/app/(routes)/(main)/blog/page.tsx b/app/(routes)/(main)/blog/page.tsx
@@ -43,16 +43,15 @@ export default async function BlogPage() {
               )}
             >
               {post.cover && (
-                <Image
-                  src={post.cover}
-                  alt={post.title}
-                  priority={true}
-                  width={0}
-                  height={0}
-                  sizes="100vw"
-                  style={{ width: '100%', height: 'auto' }}
-                  className="rounded-2xl"
-                />
+                <div className="relative aspect-video h-auto w-full">
+                  <Image
+                    src={post.cover}
+                    alt={post.title}
+                    priority={true}
+                    fill
+                    className="rounded-2xl"
+                  />
+                </div>
               )}
               <div className="flex flex-col gap-2">
                 <div className="flex items-center justify-between">